'use client';

import React, { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { PlusCircle, MoreHorizontal, Edit, Trash2 } from "lucide-react";
import Link from "next/link";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Switch } from '@/components/ui/switch';

interface Language {
    id: string;
    name: string;
    code: string;
    isActive: boolean;
}

const initialLanguages: Language[] = [
    { id: '1', name: 'English', code: 'en', isActive: true },
    { id: '2', name: 'Spanish', code: 'es', isActive: false },
];

export default function AdminLanguagesPage() {
    const [languages, setLanguages] = useState<Language[]>(initialLanguages);

    const handleActiveChange = (id: string, isActive: boolean) => {
        setLanguages(currentLanguages =>
            currentLanguages.map(lang =>
                lang.id === id ? { ...lang, isActive } : lang
            )
        );
    };

    return (
        <Card>
            <CardHeader>
                <div className="flex items-center justify-between">
                    <div>
                        <CardTitle>Languages</CardTitle>
                        <CardDescription>Manage the languages available for the application.</CardDescription>
                    </div>
                    <Button asChild size="sm" className="gap-1">
                        <Link href="/admin/settings/languages/add">
                            <PlusCircle className="h-4 w-4" />
                            Add Language
                        </Link>
                    </Button>
                </div>
            </CardHeader>
            <CardContent>
                <Table>
                    <TableHeader>
                        <TableRow>
                            <TableHead>Language Name</TableHead>
                            <TableHead>Code</TableHead>
                            <TableHead>Active</TableHead>
                            <TableHead className="text-right">Actions</TableHead>
                        </TableRow>
                    </TableHeader>
                    <TableBody>
                        {languages.map((lang) => (
                            <TableRow key={lang.id}>
                                <TableCell className="font-medium">{lang.name}</TableCell>
                                <TableCell>{lang.code}</TableCell>
                                <TableCell>
                                    <Switch
                                        checked={lang.isActive}
                                        onCheckedChange={(checked) => handleActiveChange(lang.id, checked)}
                                    />
                                </TableCell>
                                <TableCell className="text-right">
                                    <DropdownMenu>
                                        <DropdownMenuTrigger asChild>
                                            <Button aria-haspopup="true" size="icon" variant="ghost">
                                                <MoreHorizontal className="h-4 w-4" />
                                                <span className="sr-only">Toggle menu</span>
                                            </Button>
                                        </DropdownMenuTrigger>
                                        <DropdownMenuContent align="end">
                                            <DropdownMenuItem asChild>
                                                <Link href={`/admin/settings/languages/edit/${lang.code}`}>
                                                    <Edit className="mr-2 h-4 w-4" />
                                                    Edit
                                                </Link>
                                            </DropdownMenuItem>
                                            <DropdownMenuItem className="text-destructive">
                                                <Trash2 className="mr-2 h-4 w-4" />
                                                Delete
                                            </DropdownMenuItem>
                                        </DropdownMenuContent>
                                    </DropdownMenu>
                                </TableCell>
                            </TableRow>
                        ))}
                    </TableBody>
                </Table>
            </CardContent>
        </Card>
    );
}