turash/bugulma/frontend/pages/admin/LocalizationUIPage.tsx

import {
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  FormField,
  Input,
  Label,
  Badge,
} from '@/components/ui';
import {
  useTranslationKeys,
  useUpdateUITranslation,
  useBulkUpdateUITranslations,
  useAutoTranslateMissing,
} from '@/hooks/api/useAdminAPI.ts';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { Save, Download, Upload, Sparkles, Search } from 'lucide-react';
import { useState, useMemo } from 'react';
import { Combobox } from '@/components/ui/Combobox.tsx';

const LocalizationUIPage = () => {
  const { t, currentLocale } = useTranslation();
  const [selectedLocale, setSelectedLocale] = useState<string>('en');
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedKey, setSelectedKey] = useState<string | null>(null);
  const [translationValue, setTranslationValue] = useState('');
  const [isBulkMode, setIsBulkMode] = useState(false);
  const [bulkUpdates, setBulkUpdates] = useState<Record<string, string>>({});

  const { data: translationKeys, isLoading } = useTranslationKeys(selectedLocale);
  const { mutate: updateTranslation, isPending: isUpdating } = useUpdateUITranslation();
  const { mutate: bulkUpdate, isPending: isBulkUpdating } = useBulkUpdateUITranslations();
  const { mutate: autoTranslate, isPending: isAutoTranslating } = useAutoTranslateMissing();

  const filteredKeys = useMemo(() => {
    if (!translationKeys?.keys) return [];
    if (!searchTerm) return translationKeys.keys;
    const term = searchTerm.toLowerCase();
    return translationKeys.keys.filter(
      (key) => key.key.toLowerCase().includes(term) || key.source.toLowerCase().includes(term)
    );
  }, [translationKeys?.keys, searchTerm]);

  const selectedKeyData = useMemo(() => {
    if (!selectedKey || !translationKeys?.keys) return null;
    return translationKeys.keys.find((k) => k.key === selectedKey);
  }, [selectedKey, translationKeys?.keys]);

  const handleSave = () => {
    if (!selectedKey) return;
    updateTranslation(
      {
        locale: selectedLocale,
        key: selectedKey,
        value: translationValue,
      },
      {
        onSuccess: () => {
          // Query will refetch automatically
        },
      }
    );
  };

  const handleBulkSave = () => {
    const updates = Object.entries(bulkUpdates).map(([key, value]) => ({
      locale: selectedLocale,
      key,
      value,
    }));
    bulkUpdate(updates, {
      onSuccess: () => {
        setBulkUpdates({});
        setIsBulkMode(false);
      },
    });
  };

  const handleAutoTranslate = () => {
    autoTranslate(
      {
        sourceLocale: 'ru', // Russian is the source
        targetLocale: selectedLocale,
      },
      {
        onSuccess: () => {
          // Query will refetch automatically
        },
      }
    );
  };

  const getStatusBadge = (status: string) => {
    switch (status) {
      case 'translated':
        return <Badge variant="success">✓ Translated</Badge>;
      case 'missing':
        return <Badge variant="destructive">Missing</Badge>;
      default:
        return <Badge variant="secondary">{status}</Badge>;
    }
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold">
            {t('adminPage.localization.ui.title') || 'UI Translations'}
          </h1>
          <p className="text-muted-foreground">
            {t('adminPage.localization.ui.description') ||
              'Manage all frontend UI text translations'}
          </p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" onClick={() => setIsBulkMode(!isBulkMode)}>
            {isBulkMode ? 'Single Edit' : 'Bulk Edit'}
          </Button>
          <Button variant="outline" onClick={handleAutoTranslate} disabled={isAutoTranslating}>
            <Sparkles className="h-4 w-4 mr-2" />
            {isAutoTranslating ? 'Translating...' : 'Auto-Translate Missing'}
          </Button>
          <Button variant="outline">
            <Download className="h-4 w-4 mr-2" />
            Export
          </Button>
          <Button variant="outline">
            <Upload className="h-4 w-4 mr-2" />
            Import
          </Button>
        </div>
      </div>

      {/* Locale Selector and Stats */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <FormField>
                <Label>Target Locale</Label>
                <Combobox
                  value={selectedLocale}
                  onChange={setSelectedLocale}
                  options={[
                    { value: 'en', label: 'English (en)' },
                    { value: 'tt', label: 'Tatar (tt)' },
                  ]}
                />
              </FormField>
              {translationKeys && (
                <div className="flex gap-4 text-sm">
                  <div>
                    <span className="text-muted-foreground">Total: </span>
                    <span className="font-medium">{translationKeys.total}</span>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Translated: </span>
                    <span className="font-medium text-success">{translationKeys.translated}</span>
                  </div>
                  <div>
                    <span className="text-muted-foreground">Missing: </span>
                    <span className="font-medium text-destructive">{translationKeys.missing}</span>
                  </div>
                </div>
              )}
            </div>
          </div>
        </CardContent>
      </Card>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* Translation Keys List */}
        <Card>
          <CardHeader>
            <CardTitle>Translation Keys</CardTitle>
            <Input
              placeholder="Search keys..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              icon={<Search className="h-4 w-4" />}
            />
          </CardHeader>
          <CardContent>
            <div className="space-y-2 max-h-[600px] overflow-y-auto">
              {filteredKeys.map((keyData) => (
                <div
                  key={keyData.key}
                  className={`p-3 rounded-md border cursor-pointer transition-colors ${
                    selectedKey === keyData.key
                      ? 'border-primary bg-primary/5'
                      : 'border-border hover:bg-muted/50'
                  }`}
                  onClick={() => {
                    setSelectedKey(keyData.key);
                    setTranslationValue(keyData.value || keyData.source);
                  }}
                >
                  <div className="flex items-center justify-between mb-1">
                    <span className="font-mono text-sm font-medium">{keyData.key}</span>
                    {getStatusBadge(keyData.status)}
                  </div>
                  <p className="text-sm text-muted-foreground line-clamp-2">{keyData.source}</p>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* Translation Editor */}
        <Card>
          <CardHeader>
            <CardTitle>
              {selectedKey ? `Edit: ${selectedKey}` : 'Select a translation key'}
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {selectedKeyData && (
              <>
                <FormField>
                  <Label>Source (Russian)</Label>
                  <Input value={selectedKeyData.source} disabled className="bg-muted" />
                </FormField>

                <FormField>
                  <Label>Translation ({selectedLocale.toUpperCase()})</Label>
                  <textarea
                    className="min-h-[200px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                    value={translationValue}
                    onChange={(e) => setTranslationValue(e.target.value)}
                    placeholder="Enter translation..."
                  />
                </FormField>

                <div className="flex justify-end gap-2">
                  <Button
                    variant="outline"
                    onClick={() => setTranslationValue(selectedKeyData.source)}
                  >
                    Copy from Source
                  </Button>
                  <Button onClick={handleSave} disabled={isUpdating || !translationValue}>
                    <Save className="h-4 w-4 mr-2" />
                    {isUpdating ? 'Saving...' : 'Save'}
                  </Button>
                </div>
              </>
            )}
            {!selectedKey && (
              <div className="text-center py-12 text-muted-foreground">
                Select a translation key from the list to edit
              </div>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
};

export default LocalizationUIPage;