'use client';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';
import Link from 'next/link';
import { ChevronLeft } from 'lucide-react';
import { useParams, useRouter } from 'next/navigation';
import { translations } from '@/lib/locales';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';

const languages: Record<string, string> = {
    en: 'English',
    es: 'Spanish',
};

export default function EditLanguagePage() {
  const { toast } = useToast();
  const router = useRouter();
  const params = useParams();
  const lang = params.lang as string;
  const languageName = languages[lang] || 'Unknown';
  const languageKeys = Object.keys(translations['en']);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    
    toast({
      title: 'Translations Saved!',
      description: `The translations for ${languageName} have been updated.`,
    });

    router.push('/admin/settings/languages');
  };

  return (
    <div className="mx-auto grid max-w-4xl flex-1 auto-rows-max gap-4">
        <div className="flex items-center gap-4">
            <Button variant="outline" size="icon" className="h-7 w-7" asChild>
                <Link href="/admin/settings/languages">
                    <ChevronLeft className="h-4 w-4" />
                    <span className="sr-only">Back</span>
                </Link>
            </Button>
            <h1 className="flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0">
                Edit Translations for {languageName} ({lang.toUpperCase()})
            </h1>
        </div>
        <form onSubmit={handleSubmit} className="grid gap-4">
            <Card>
                <CardHeader>
                    <CardTitle>Application Texts</CardTitle>
                    <CardDescription>Enter the translated text for each phrase.</CardDescription>
                </CardHeader>
                <CardContent>
                    <Table>
                        <TableHeader>
                            <TableRow>
                                <TableHead className="w-1/3">Original (English)</TableHead>
                                <TableHead className="w-2/3">Translation ({languageName})</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {languageKeys.map(key => (
                                <TableRow key={key}>
                                    <TableCell>
                                        <Label htmlFor={key} className="text-muted-foreground">{translations.en[key]}</Label>
                                    </TableCell>
                                    <TableCell>
                                        <Input
                                            id={key}
                                            name={key}
                                            defaultValue={translations[lang]?.[key] || ''}
                                            placeholder={`Translation for "${translations.en[key]}"`}
                                        />
                                    </TableCell>
                                </TableRow>
                            ))}
                        </TableBody>
                    </Table>
                </CardContent>
            </Card>

            <div className='flex justify-end'>
                <Button type="submit" size="lg">Save Changes</Button>
            </div>
        </form>
    </div>
  );
}