'use client';

import { useState } from 'react';
import { FaqCategory } from './FaqCard';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Plus, Trash, Save, Settings } from 'lucide-react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { useRouter } from 'next/navigation';

interface FaqManagerProps {
    initialData: FaqCategory[];
    onSave: (data: FaqCategory[]) => Promise<void>;
    lng: string;
}

export function FaqManager({ initialData, onSave, lng }: FaqManagerProps) {
    const [categories, setCategories] = useState<FaqCategory[]>(initialData);
    const [activeTab, setActiveTab] = useState<string>(categories[0]?.label || '');
    const [isSettingsView, setIsSettingsView] = useState(false);
    const [showSaveDialog, setShowSaveDialog] = useState(false);
    const router = useRouter();

    const addCategory = () => {
        const newCategory = {
            label: 'New Category',
            items: []
        };
        setCategories([...categories, newCategory]);
        setActiveTab(newCategory.label);
    };

    const addItem = (categoryIndex: number) => {
        const newCategories = [...categories];
        newCategories[categoryIndex].items.push({
            title: 'New FAQ Item',
            content: ['Enter content here']
        });
        setCategories(newCategories);
    };

    const handleSave = async () => {
        await onSave(categories);
        setShowSaveDialog(false);
        router.push(`/${lng}/evcp/faq`);
    };

    const updateCategory = (index: number, label: string) => {
        const newCategories = [...categories];
        newCategories[index] = { ...newCategories[index], label };
        setCategories(newCategories);
        if (activeTab === categories[index].label) {
            setActiveTab(label);
        }
    };

    const updateItem = (categoryIndex: number, itemIndex: number, field: 'title' | 'content', value: string | string[]) => {
        const newCategories = [...categories];
        if (field === 'content') {
            newCategories[categoryIndex].items[itemIndex][field] = (value as string).split('\n');
        } else {
            newCategories[categoryIndex].items[itemIndex][field] = value as string;
        }
        setCategories(newCategories);
    };

    const removeCategory = (index: number) => {
        const newCategories = categories.filter((_, i) => i !== index);
        setCategories(newCategories);
        setActiveTab(newCategories[0]?.label || '');
    };

    const removeItem = (categoryIndex: number, itemIndex: number) => {
        const newCategories = [...categories];
        newCategories[categoryIndex].items = newCategories[categoryIndex].items.filter((_, i) => i !== itemIndex);
        setCategories(newCategories);
    };

    return (
        <div className="space-y-6">
            <div className="flex justify-between items-center">
                <div className="flex items-center space-x-2">
                    <Button 
                        variant={isSettingsView ? "default" : "outline"} 
                        onClick={() => setIsSettingsView(true)}
                    >
                        <Settings className="w-4 h-4 mr-2" />
                        Category Settings
                    </Button>
                    <Button 
                        variant={!isSettingsView ? "default" : "outline"} 
                        onClick={() => setIsSettingsView(false)}
                    >
                        FAQ Management
                    </Button>
                </div>
                <Button onClick={() => setShowSaveDialog(true)}>
                    <Save className="w-4 h-4 mr-2" />
                    Save Changes
                </Button>
            </div>

            {isSettingsView ? (
                <div className="grid gap-4">
                    {categories.map((category, index) => (
                        <Card key={index} className="p-4">
                            <div className="flex space-x-4 items-center">
                                <Input
                                    value={category.label}
                                    onChange={(e) => updateCategory(index, e.target.value)}
                                    className="flex-1"
                                    placeholder="Category Name"
                                />
                                <Button variant="destructive" size="icon" onClick={() => removeCategory(index)}>
                                    <Trash className="w-4 h-4" />
                                </Button>
                            </div>
                        </Card>
                    ))}
                    <Button onClick={addCategory} variant="outline" className="w-full">
                        <Plus className="w-4 h-4 mr-2" />
                        Add Category
                    </Button>
                </div>
            ) : (
                <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-4">
                    <TabsList>
                        {categories.map((category) => (
                            <TabsTrigger key={category.label} value={category.label}>
                                {category.label}
                            </TabsTrigger>
                        ))}
                    </TabsList>

                    {categories.map((category, categoryIndex) => (
                        <TabsContent key={category.label} value={category.label} className="space-y-4">
                            {category.items.map((item, itemIndex) => (
                                <Card key={itemIndex}>
                                    <CardContent className="space-y-2 pt-6">
                                        <div className="flex justify-between items-start">
                                            <Input
                                                value={item.title}
                                                onChange={(e) => updateItem(categoryIndex, itemIndex, 'title', e.target.value)}
                                                className="flex-1 mr-2"
                                                placeholder="Question"
                                            />
                                            <Button variant="destructive" size="icon" onClick={() => removeItem(categoryIndex, itemIndex)}>
                                                <Trash className="w-4 h-4" />
                                            </Button>
                                        </div>
                                        <Textarea
                                            value={item.content.join('\n')}
                                            onChange={(e) => updateItem(categoryIndex, itemIndex, 'content', e.target.value)}
                                            placeholder="Answer (separate lines with Enter)"
                                            rows={3}
                                        />
                                    </CardContent>
                                </Card>
                            ))}
                            <Button variant="outline" onClick={() => addItem(categoryIndex)} className="w-full">
                                <Plus className="w-4 h-4 mr-2" />
                                Add FAQ Item
                            </Button>
                        </TabsContent>
                    ))}
                </Tabs>
            )}

            <Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
                <DialogContent>
                    <DialogHeader>
                        <DialogTitle>Save Changes</DialogTitle>
                        <DialogDescription>
                            Are you sure you want to save the changes? This will update the FAQ data.
                        </DialogDescription>
                    </DialogHeader>
                    <DialogFooter>
                        <Button variant="outline" onClick={() => setShowSaveDialog(false)}>
                            Cancel
                        </Button>
                        <Button onClick={handleSave}>
                            Save
                        </Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </div>
    );
}