'use client';

import React, { useEffect, useState, useCallback } from 'react';
import { useTranslation } from '@/lib/i18n';
import {
  GitBranch,
  Plus,
  ArrowRight,
  Pencil,
  Trash2,
  Play,
  Pause,
  Star,
} from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { authFetch } from '@/lib/api';

interface WorkflowStep {
  id: string;
  name: string;
  role: string;
  action: string;
  autoForward: boolean;
}

interface Workflow {
  id: string;
  name: string;
  nameBn?: string;
  steps: WorkflowStep[];
  isActive: boolean;
  isDefault: boolean;
  createdAt: string;
}

const ROLE_OPTIONS = ['admin', 'head_of_department', 'service_engineer', 'vendor'];
const ACTION_OPTIONS = ['approve', 'reject', 'forward', 'assign', 'resolve', 'review'];

export default function ApprovalWorkflow() {
  const { t } = useTranslation();
  const [workflows, setWorkflows] = useState<Workflow[]>([]);
  const [loading, setLoading] = useState(true);
  const [addOpen, setAddOpen] = useState(false);
  const [editWorkflow, setEditWorkflow] = useState<Workflow | null>(null);
  const [saving, setSaving] = useState(false);

  const [formName, setFormName] = useState('');
  const [formSteps, setFormSteps] = useState<WorkflowStep[]>([
    { id: crypto.randomUUID(), name: 'Step 1', role: 'head_of_department', action: 'review', autoForward: false },
  ]);

  const fetchWorkflows = useCallback(async () => {
    setLoading(true);
    try {
      const res = await authFetch('/api/workflow');
      if (res.ok) {
        const data = await res.json();
        setWorkflows(data.workflows || []);
      }
    } catch (err) {
      console.error('Fetch workflows error:', err);
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchWorkflows();
  }, [fetchWorkflows]);

  const resetForm = () => {
    setFormName('');
    setFormSteps([{ id: crypto.randomUUID(), name: 'Step 1', role: 'head_of_department', action: 'review', autoForward: false }]);
  };

  const openAdd = () => {
    resetForm();
    setEditWorkflow(null);
    setAddOpen(true);
  };

  const openEdit = (wf: Workflow) => {
    setEditWorkflow(wf);
    setFormName(wf.name);
    setFormSteps(wf.steps.length > 0 ? wf.steps : [{ id: crypto.randomUUID(), name: 'Step 1', role: 'head_of_department', action: 'review', autoForward: false }]);
    setAddOpen(true);
  };

  const addStep = () => {
    setFormSteps((prev) => [
      ...prev,
      { id: crypto.randomUUID(), name: `Step ${prev.length + 1}`, role: 'service_engineer', action: 'review', autoForward: false },
    ]);
  };

  const removeStep = (id: string) => {
    setFormSteps((prev) => prev.filter((s) => s.id !== id));
  };

  const updateStep = (id: string, field: keyof WorkflowStep, value: string | boolean) => {
    setFormSteps((prev) =>
      prev.map((s) => (s.id === id ? { ...s, [field]: value } : s))
    );
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      await authFetch('/api/workflow', {
        method: 'POST',
        body: JSON.stringify({
          id: editWorkflow?.id || undefined,
          name: formName,
          steps: formSteps,
          isActive: true,
          isDefault: false,
        }),
      });
      setAddOpen(false);
      resetForm();
      fetchWorkflows();
    } catch (err) {
      console.error('Save workflow error:', err);
    } finally {
      setSaving(false);
    }
  };

  const toggleWorkflowActive = async (wf: Workflow) => {
    try {
      await authFetch('/api/workflow', {
        method: 'POST',
        body: JSON.stringify({ ...wf, id: wf.id, isActive: !wf.isActive }),
      });
      fetchWorkflows();
    } catch (err) {
      console.error('Toggle workflow error:', err);
    }
  };

  const setDefaultWorkflow = async (wf: Workflow) => {
    try {
      await authFetch('/api/workflow', {
        method: 'POST',
        body: JSON.stringify({ ...wf, id: wf.id, isDefault: true, isActive: true }),
      });
      fetchWorkflows();
    } catch (err) {
      console.error('Set default workflow error:', err);
    }
  };

  const roleLabel = (role: string) => {
    const m: Record<string, string> = {
      admin: 'Admin', head_of_department: 'HOD', service_engineer: 'Engineer', vendor: 'Vendor',
    };
    return m[role] || role;
  };

  const stepColor = (index: number) => {
    const colors = [
      'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-300',
      'bg-blue-100 text-blue-800 dark:bg-blue-950/30 dark:text-blue-300',
      'bg-orange-100 text-orange-800 dark:bg-orange-950/30 dark:text-orange-300',
      'bg-purple-100 text-purple-800 dark:bg-purple-950/30 dark:text-purple-300',
      'bg-cyan-100 text-cyan-800 dark:bg-cyan-950/30 dark:text-cyan-300',
    ];
    return colors[index % colors.length];
  };

  return (
    <div className="space-y-6 animate-fade-in">
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
        <div>
          <h1 className="text-2xl font-bold">{t.nav.approvalWorkflow}</h1>
          <p className="text-sm text-muted-foreground">Configure complaint approval workflows</p>
        </div>
        <Button onClick={openAdd} className="bg-emerald-600 hover:bg-emerald-700">
          <Plus className="w-4 h-4 mr-2" /> New Workflow
        </Button>
      </div>

      {loading ? (
        <div className="p-8 text-center text-muted-foreground">{t.common.loading}</div>
      ) : workflows.length === 0 ? (
        <Card>
          <CardContent className="p-8 text-center">
            <GitBranch className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
            <p className="text-sm text-muted-foreground">{t.common.noData}</p>
            <Button onClick={openAdd} variant="outline" className="mt-3">
              <Plus className="w-4 h-4 mr-2" /> Create First Workflow
            </Button>
          </CardContent>
        </Card>
      ) : (
        <div className="space-y-4">
          {workflows.map((wf) => (
            <Card key={wf.id} className="hover:shadow-md transition-shadow">
              <CardHeader className="pb-3">
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-3">
                    <CardTitle className="text-base">{wf.name}</CardTitle>
                    {wf.isDefault && (
                      <Badge className="bg-emerald-100 text-emerald-800 dark:bg-emerald-950/30 dark:text-emerald-300 text-[10px]">
                        <Star className="w-3 h-3 mr-1" /> Default
                      </Badge>
                    )}
                  </div>
                  <div className="flex items-center gap-2">
                    <Button
                      variant="ghost"
                      size="icon"
                      className="h-8 w-8"
                      onClick={() => setDefaultWorkflow(wf)}
                      title="Set as default"
                    >
                      <Star className={`w-4 h-4 ${wf.isDefault ? 'text-emerald-600 fill-emerald-600' : 'text-muted-foreground'}`} />
                    </Button>
                    <Switch
                      checked={wf.isActive}
                      onCheckedChange={() => toggleWorkflowActive(wf)}
                    />
                    <Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEdit(wf)}>
                      <Pencil className="w-3.5 h-3.5" />
                    </Button>
                  </div>
                </div>
                <CardDescription className="text-xs">
                  {wf.steps.length} steps • {wf.isActive ? 'Active' : 'Inactive'}
                </CardDescription>
              </CardHeader>
              <CardContent>
                {/* Visual Step Flow */}
                <div className="flex items-center gap-2 overflow-x-auto pb-2">
                  {wf.steps.map((step, idx) => (
                    <React.Fragment key={step.id}>
                      <div className={`flex-shrink-0 px-3 py-2 rounded-lg border ${stepColor(idx)} min-w-[120px]`}>
                        <p className="text-xs font-semibold">{step.name}</p>
                        <p className="text-[10px] mt-0.5">{roleLabel(step.role)} • {step.action}</p>
                        {step.autoForward && (
                          <Badge variant="outline" className="text-[8px] mt-1">Auto</Badge>
                        )}
                      </div>
                      {idx < wf.steps.length - 1 && (
                        <ArrowRight className="w-4 h-4 text-muted-foreground flex-shrink-0" />
                      )}
                    </React.Fragment>
                  ))}
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      )}

      {/* Add/Edit Workflow Dialog */}
      <Dialog open={addOpen} onOpenChange={setAddOpen}>
        <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{editWorkflow ? `Edit: ${editWorkflow.name}` : 'Create New Workflow'}</DialogTitle>
            <DialogDescription>Define the approval steps for this workflow</DialogDescription>
          </DialogHeader>

          <div className="space-y-4 py-2">
            <div className="space-y-1.5">
              <Label className="text-xs">Workflow Name *</Label>
              <Input value={formName} onChange={(e) => setFormName(e.target.value)} placeholder="e.g., Standard Complaint Flow" />
            </div>

            <Separator />

            <div>
              <div className="flex items-center justify-between mb-3">
                <Label className="text-sm font-semibold">Steps</Label>
                <Button variant="outline" size="sm" onClick={addStep}>
                  <Plus className="w-3.5 h-3.5 mr-1" /> Add Step
                </Button>
              </div>

              <div className="space-y-3">
                {formSteps.map((step, idx) => (
                  <div key={step.id} className="p-3 border rounded-lg space-y-2">
                    <div className="flex items-center justify-between">
                      <span className={`inline-flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold ${stepColor(idx)}`}>
                        {idx + 1}
                      </span>
                      <Button
                        variant="ghost"
                        size="icon"
                        className="h-6 w-6 text-red-500"
                        onClick={() => removeStep(step.id)}
                        disabled={formSteps.length <= 1}
                      >
                        <Trash2 className="w-3 h-3" />
                      </Button>
                    </div>
                    <div className="grid grid-cols-2 gap-2">
                      <div className="space-y-1">
                        <Label className="text-[10px]">Step Name</Label>
                        <Input
                          value={step.name}
                          onChange={(e) => updateStep(step.id, 'name', e.target.value)}
                          className="h-8 text-xs"
                        />
                      </div>
                      <div className="space-y-1">
                        <Label className="text-[10px]">Role</Label>
                        <Select value={step.role} onValueChange={(v) => updateStep(step.id, 'role', v)}>
                          <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
                          <SelectContent>
                            {ROLE_OPTIONS.map((r) => (
                              <SelectItem key={r} value={r}>{roleLabel(r)}</SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                    </div>
                    <div className="grid grid-cols-2 gap-2">
                      <div className="space-y-1">
                        <Label className="text-[10px]">Action</Label>
                        <Select value={step.action} onValueChange={(v) => updateStep(step.id, 'action', v)}>
                          <SelectTrigger className="h-8 text-xs"><SelectValue /></SelectTrigger>
                          <SelectContent>
                            {ACTION_OPTIONS.map((a) => (
                              <SelectItem key={a} value={a}>{a}</SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </div>
                      <div className="flex items-center gap-2 pt-4">
                        <Switch
                          checked={step.autoForward}
                          onCheckedChange={(v) => updateStep(step.id, 'autoForward', v)}
                        />
                        <Label className="text-[10px]">Auto-forward</Label>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setAddOpen(false)}>{t.actions.cancel}</Button>
            <Button onClick={handleSave} disabled={saving || !formName} className="bg-emerald-600 hover:bg-emerald-700">
              {saving ? t.common.loading : t.actions.save}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}