'use client';

import React, { useState, useEffect, useCallback, useRef } from 'react';
import { useTranslation } from '@/lib/i18n';
import { PlusCircle, Loader2, Paperclip, Trash2, FileText, CheckCircle2 } 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 { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Badge } from '@/components/ui/badge';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { useToast } from '@/hooks/use-toast';
import { authFetch } from '@/lib/api';

function formatFileSize(bytes: number): string {
  if (bytes === 0) return '0 B';
  const k = 1024;
  const sizes = ['B', 'KB', 'MB', 'GB'];
  const i = Math.floor(Math.log(bytes) / Math.log(k));
  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
}

function getFileTypeColor(fileName: string) {
  const ext = fileName.split('.').pop()?.toLowerCase() || '';
  const colorMap: Record<string, string> = {
    pdf: 'text-red-500', xlsx: 'text-emerald-600', xls: 'text-emerald-600',
    csv: 'text-emerald-600', doc: 'text-blue-600', docx: 'text-blue-600',
    png: 'text-purple-500', jpg: 'text-purple-500', jpeg: 'text-purple-500',
  };
  return colorMap[ext] || 'text-muted-foreground';
}

export default function CreateComplaint() {
  const { t } = useTranslation();
  const { toast } = useToast();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const [isDragOver, setIsDragOver] = useState(false);

  const [areas, setAreas] = useState<Array<{ id: string; name: string; code: string }>>([]);
  const [saving, setSaving] = useState(false);
  const [successOpen, setSuccessOpen] = useState(false);
  const [createdTicket, setCreatedTicket] = useState('');

  const [form, setForm] = useState({
    clientName: '',
    clientPhone: '',
    clientEmail: '',
    clientAddress: '',
    complaintType: '',
    priority: 'medium',
    description: '',
    areaId: '',
  });

  const [files, setFiles] = useState<File[]>([]);

  const fetchAreas = useCallback(async () => {
    try {
      const res = await authFetch('/api/areas');
      if (res.ok) {
        const data = await res.json();
        setAreas(data.areas || []);
      }
    } catch (err) {
      console.error('Fetch areas error:', err);
    }
  }, []);

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

  const handleFileSelect = (newFiles: FileList | null) => {
    if (!newFiles) return;
    const allowed = ['.pdf', '.xlsx', '.xls', '.csv', '.png', '.jpg', '.jpeg', '.doc', '.docx'];
    const fileArray = Array.from(newFiles).filter(f => {
      const ext = '.' + f.name.split('.').pop()?.toLowerCase();
      return allowed.includes(ext);
    });
    setFiles(prev => [...prev, ...fileArray]);
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

  const removeFile = (index: number) => {
    const updated = [...files];
    updated.splice(index, 1);
    setFiles(updated);
  };

  const handleSubmit = async () => {
    if (!form.clientName || !form.clientPhone || !form.complaintType || !form.description || !form.areaId) {
      toast({
        title: 'Validation Error',
        description: 'Please fill in all required fields',
        variant: 'destructive',
      });
      return;
    }

    setSaving(true);
    try {
      const attachmentNames = files.map(f => f.name);
      const res = await authFetch('/api/complaints', {
        method: 'POST',
        body: JSON.stringify({
          ...form,
          source: 'manual',
          attachments: attachmentNames.length > 0 ? attachmentNames : undefined,
        }),
      });

      if (res.ok) {
        const data = await res.json();
        setCreatedTicket(data.complaint?.ticketNumber || '');
        setSuccessOpen(true);
        // Reset form
        setForm({
          clientName: '',
          clientPhone: '',
          clientEmail: '',
          clientAddress: '',
          complaintType: '',
          priority: 'medium',
          description: '',
          areaId: '',
        });
        setFiles([]);
      } else {
        const data = await res.json();
        toast({
          title: t.messages.error.createFailed,
          description: data.error || 'Failed to create task',
          variant: 'destructive',
        });
      }
    } catch {
      toast({
        title: t.messages.error.networkError,
        variant: 'destructive',
      });
    } finally {
      setSaving(false);
    }
  };

  const handleCreateAnother = () => {
    setSuccessOpen(false);
    setCreatedTicket('');
  };

  return (
    <div className="space-y-6 animate-fade-in">
      <div>
        <h1 className="text-2xl font-bold text-foreground">Create Task</h1>
        <p className="text-sm text-muted-foreground mt-1">Submit a new task</p>
      </div>

      {/* Success Banner */}
      {successOpen && (
        <Card className="border-emerald-300 bg-emerald-50 dark:bg-emerald-950/20 dark:border-emerald-700">
          <CardContent className="p-4">
            <div className="flex items-center gap-3">
              <CheckCircle2 className="w-8 h-8 text-emerald-600 flex-shrink-0" />
              <div className="flex-1">
                <p className="text-sm font-semibold text-emerald-800 dark:text-emerald-200">
                  Task Created Successfully!
                </p>
                <p className="text-xs text-emerald-600 dark:text-emerald-400 mt-0.5">
                  Ticket Number: <span className="font-mono font-bold">{createdTicket}</span>
                </p>
              </div>
              <div className="flex gap-2">
                <Button size="sm" onClick={handleCreateAnother} className="bg-emerald-600 hover:bg-emerald-700">
                  <PlusCircle className="w-3.5 h-3.5 mr-1" /> Create Another
                </Button>
                <Button size="sm" variant="outline" onClick={() => setSuccessOpen(false)}>
                  Dismiss
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* Main Form */}
        <Card className="lg:col-span-2">
          <CardHeader className="pb-3">
            <CardTitle className="text-base">Task Details</CardTitle>
            <CardDescription>Fill in the task information below</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            {/* Client Info */}
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label className="text-xs font-medium">{t.complaint.clientName} *</Label>
                <Input
                  value={form.clientName}
                  onChange={(e) => setForm(prev => ({ ...prev, clientName: e.target.value }))}
                  placeholder="Client full name"
                />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium">{t.complaint.clientPhone} *</Label>
                <Input
                  value={form.clientPhone}
                  onChange={(e) => setForm(prev => ({ ...prev, clientPhone: e.target.value }))}
                  placeholder="+880..."
                />
              </div>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
              <div className="space-y-1.5">
                <Label className="text-xs font-medium">Email</Label>
                <Input
                  type="email"
                  value={form.clientEmail}
                  onChange={(e) => setForm(prev => ({ ...prev, clientEmail: e.target.value }))}
                  placeholder="client@example.com"
                />
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium">Address</Label>
                <Input
                  value={form.clientAddress}
                  onChange={(e) => setForm(prev => ({ ...prev, clientAddress: e.target.value }))}
                  placeholder="Client address"
                />
              </div>
            </div>

            {/* Task Info */}
            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
              <div className="space-y-1.5">
                <Label className="text-xs font-medium">{t.complaint.type} *</Label>
                <Select value={form.complaintType} onValueChange={(v) => setForm(prev => ({ ...prev, complaintType: v }))}>
                  <SelectTrigger><SelectValue placeholder="Select type" /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="hardware">Hardware</SelectItem>
                    <SelectItem value="software">Software</SelectItem>
                    <SelectItem value="network">Network</SelectItem>
                    <SelectItem value="other">Other</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium">{t.complaint.priority} *</Label>
                <Select value={form.priority} onValueChange={(v) => setForm(prev => ({ ...prev, priority: v }))}>
                  <SelectTrigger><SelectValue /></SelectTrigger>
                  <SelectContent>
                    <SelectItem value="low">Low</SelectItem>
                    <SelectItem value="medium">Medium</SelectItem>
                    <SelectItem value="high">High</SelectItem>
                    <SelectItem value="critical">Critical</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-1.5">
                <Label className="text-xs font-medium">{t.complaint.area} *</Label>
                <Select value={form.areaId} onValueChange={(v) => setForm(prev => ({ ...prev, areaId: v }))}>
                  <SelectTrigger><SelectValue placeholder="Select area" /></SelectTrigger>
                  <SelectContent>
                    {areas.map((a) => (
                      <SelectItem key={a.id} value={a.id}>{a.name} ({a.code})</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>

            {/* Description */}
            <div className="space-y-1.5">
              <Label className="text-xs font-medium">{t.complaint.description} *</Label>
              <Textarea
                value={form.description}
                onChange={(e) => setForm(prev => ({ ...prev, description: e.target.value }))}
                placeholder="Describe the task in detail..."
                rows={5}
              />
            </div>

            {/* File Attachments */}
            <div className="space-y-2">
              <Label className="text-xs font-medium flex items-center gap-1">
                <Paperclip className="w-3.5 h-3.5" /> Attachments
              </Label>
              <div
                className={`border-2 border-dashed rounded-lg p-4 text-center transition-colors cursor-pointer ${
                  isDragOver
                    ? 'border-emerald-500 bg-emerald-50 dark:bg-emerald-950/20'
                    : 'border-emerald-300 dark:border-emerald-700 hover:border-emerald-500'
                }`}
                onDragOver={(e) => { e.preventDefault(); setIsDragOver(true); }}
                onDragLeave={(e) => { e.preventDefault(); setIsDragOver(false); }}
                onDrop={(e) => { e.preventDefault(); setIsDragOver(false); handleFileSelect(e.dataTransfer.files); }}
                onClick={() => fileInputRef.current?.click()}
              >
                <Paperclip className="w-6 h-6 text-emerald-500 mx-auto mb-1" />
                <p className="text-xs font-medium">Drag & drop files or click to browse</p>
                <p className="text-[10px] text-muted-foreground mt-0.5">PDF, Excel, CSV, Images, Word</p>
                <input
                  ref={fileInputRef}
                  type="file"
                  multiple
                  className="hidden"
                  accept=".pdf,.xlsx,.xls,.csv,.png,.jpg,.jpeg,.doc,.docx"
                  onChange={(e) => handleFileSelect(e.target.files)}
                />
              </div>

              {files.length > 0 && (
                <div className="space-y-1.5 max-h-40 overflow-y-auto pr-1">
                  {files.map((f, idx) => (
                    <div key={`${f.name}-${idx}`} className="flex items-center gap-2 bg-muted/50 rounded-md px-2.5 py-1.5 text-xs group">
                      <FileText className={`w-3.5 h-3.5 flex-shrink-0 ${getFileTypeColor(f.name)}`} />
                      <span className="truncate flex-1 font-medium">{f.name}</span>
                      <span className="text-muted-foreground flex-shrink-0">{formatFileSize(f.size)}</span>
                      <Button variant="ghost" size="icon" className="h-5 w-5 flex-shrink-0" onClick={(e) => { e.stopPropagation(); removeFile(idx); }}>
                        <Trash2 className="w-3 h-3 text-red-500" />
                      </Button>
                    </div>
                  ))}
                </div>
              )}

              {files.length > 0 && (
                <Badge variant="secondary" className="text-[10px] bg-emerald-100 text-emerald-700 dark:bg-emerald-950/30 dark:text-emerald-300">
                  <Paperclip className="w-3 h-3 mr-0.5" />
                  {files.length} file{files.length !== 1 ? 's' : ''} attached
                </Badge>
              )}
            </div>

            {/* Submit */}
            <div className="flex gap-3 pt-2">
              <Button
                onClick={handleSubmit}
                disabled={saving || !form.clientName || !form.clientPhone || !form.complaintType || !form.description || !form.areaId}
                className="bg-emerald-600 hover:bg-emerald-700"
              >
                {saving ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : <PlusCircle className="w-4 h-4 mr-2" />}
                Create Task
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Sidebar Info */}
        <div className="space-y-4">
          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm">Submission Info</CardTitle>
            </CardHeader>
            <CardContent className="space-y-2 text-xs text-muted-foreground">
              <p>• Source: <span className="font-medium text-foreground">Manual</span></p>
              <p>• Auto-assigns to area HOD if available</p>
              <p>• Ticket number generated automatically</p>
              <p>• Notifications sent to assigned HOD</p>
            </CardContent>
          </Card>

          <Card>
            <CardHeader className="pb-2">
              <CardTitle className="text-sm">Required Fields</CardTitle>
            </CardHeader>
            <CardContent className="space-y-1.5 text-xs">
              <div className="flex items-center gap-2">
                <div className={`w-2 h-2 rounded-full ${form.clientName ? 'bg-emerald-500' : 'bg-red-400'}`} />
                <span>Client Name</span>
              </div>
              <div className="flex items-center gap-2">
                <div className={`w-2 h-2 rounded-full ${form.clientPhone ? 'bg-emerald-500' : 'bg-red-400'}`} />
                <span>Client Phone</span>
              </div>
              <div className="flex items-center gap-2">
                <div className={`w-2 h-2 rounded-full ${form.complaintType ? 'bg-emerald-500' : 'bg-red-400'}`} />
                <span>Task Type</span>
              </div>
              <div className="flex items-center gap-2">
                <div className={`w-2 h-2 rounded-full ${form.description ? 'bg-emerald-500' : 'bg-red-400'}`} />
                <span>Description</span>
              </div>
              <div className="flex items-center gap-2">
                <div className={`w-2 h-2 rounded-full ${form.areaId ? 'bg-emerald-500' : 'bg-red-400'}`} />
                <span>Area</span>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}