ArchiTools/src/modules/registratura/components/registry-entry-form.tsx

'use client';

import { useState, useMemo, useRef } from 'react';
import { Paperclip, X, Clock, Plus } from 'lucide-react';
import type { CompanyId } from '@/core/auth/types';
import type { RegistryEntry, RegistryDirection, RegistryStatus, DocumentType, RegistryAttachment, TrackedDeadline, DeadlineResolution } from '../types';
import { Input } from '@/shared/components/ui/input';
import { Label } from '@/shared/components/ui/label';
import { Textarea } from '@/shared/components/ui/textarea';
import { Button } from '@/shared/components/ui/button';
import { Badge } from '@/shared/components/ui/badge';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
import { useContacts } from '@/modules/address-book/hooks/use-contacts';
import { v4 as uuid } from 'uuid';
import { DeadlineCard } from './deadline-card';
import { DeadlineAddDialog } from './deadline-add-dialog';
import { DeadlineResolveDialog } from './deadline-resolve-dialog';
import { createTrackedDeadline, resolveDeadline as resolveDeadlineFn } from '../services/deadline-service';
import { getDeadlineType } from '../services/deadline-catalog';

interface RegistryEntryFormProps {
  initial?: RegistryEntry;
  allEntries?: RegistryEntry[];
  onSubmit: (data: Omit<RegistryEntry, 'id' | 'number' | 'createdAt' | 'updatedAt'>) => void;
  onCancel: () => void;
}

const DOC_TYPE_LABELS: Record<DocumentType, string> = {
  contract: 'Contract',
  oferta: 'Ofertă',
  factura: 'Factură',
  scrisoare: 'Scrisoare',
  aviz: 'Aviz',
  'nota-de-comanda': 'Notă de comandă',
  raport: 'Raport',
  cerere: 'Cerere',
  altele: 'Altele',
};

export function RegistryEntryForm({ initial, allEntries, onSubmit, onCancel }: RegistryEntryFormProps) {
  const { allContacts } = useContacts();
  const fileInputRef = useRef<HTMLInputElement>(null);

  const [direction, setDirection] = useState<RegistryDirection>(initial?.direction ?? 'intrat');
  const [documentType, setDocumentType] = useState<DocumentType>(initial?.documentType ?? 'scrisoare');
  const [subject, setSubject] = useState(initial?.subject ?? '');
  const [date, setDate] = useState(initial?.date ?? new Date().toISOString().slice(0, 10));
  const [sender, setSender] = useState(initial?.sender ?? '');
  const [senderContactId, setSenderContactId] = useState(initial?.senderContactId ?? '');
  const [recipient, setRecipient] = useState(initial?.recipient ?? '');
  const [recipientContactId, setRecipientContactId] = useState(initial?.recipientContactId ?? '');
  const [company, setCompany] = useState<CompanyId>(initial?.company ?? 'beletage');
  const [status, setStatus] = useState<RegistryStatus>(initial?.status ?? 'deschis');
  const [deadline, setDeadline] = useState(initial?.deadline ?? '');
  const [notes, setNotes] = useState(initial?.notes ?? '');
  const [linkedEntryIds, setLinkedEntryIds] = useState<string[]>(initial?.linkedEntryIds ?? []);
  const [attachments, setAttachments] = useState<RegistryAttachment[]>(initial?.attachments ?? []);
  const [trackedDeadlines, setTrackedDeadlines] = useState<TrackedDeadline[]>(initial?.trackedDeadlines ?? []);

  // ── Deadline dialogs ──
  const [deadlineAddOpen, setDeadlineAddOpen] = useState(false);
  const [resolvingDeadline, setResolvingDeadline] = useState<TrackedDeadline | null>(null);

  const handleAddDeadline = (typeId: string, startDate: string, chainParentId?: string) => {
    const tracked = createTrackedDeadline(typeId, startDate, chainParentId);
    if (tracked) setTrackedDeadlines((prev) => [...prev, tracked]);
  };

  const handleResolveDeadline = (resolution: DeadlineResolution, note: string, chainNext: boolean) => {
    if (!resolvingDeadline) return;
    const resolved = resolveDeadlineFn(resolvingDeadline, resolution, note);
    setTrackedDeadlines((prev) =>
      prev.map((d) => (d.id === resolved.id ? resolved : d))
    );

    // Handle chain
    if (chainNext) {
      const def = getDeadlineType(resolvingDeadline.typeId);
      if (def?.chainNextTypeId) {
        const resolvedDate = new Date().toISOString().slice(0, 10);
        const chained = createTrackedDeadline(def.chainNextTypeId, resolvedDate, resolvingDeadline.id);
        if (chained) setTrackedDeadlines((prev) => [...prev, chained]);
      }
    }
    setResolvingDeadline(null);
  };

  const handleRemoveDeadline = (deadlineId: string) => {
    setTrackedDeadlines((prev) => prev.filter((d) => d.id !== deadlineId));
  };

  // ── Sender/Recipient autocomplete suggestions ──
  const [senderFocused, setSenderFocused] = useState(false);
  const [recipientFocused, setRecipientFocused] = useState(false);

  const senderSuggestions = useMemo(() => {
    if (!sender || sender.length < 2) return [];
    const q = sender.toLowerCase();
    return allContacts.filter((c) => c.name.toLowerCase().includes(q) || c.company.toLowerCase().includes(q)).slice(0, 5);
  }, [allContacts, sender]);

  const recipientSuggestions = useMemo(() => {
    if (!recipient || recipient.length < 2) return [];
    const q = recipient.toLowerCase();
    return allContacts.filter((c) => c.name.toLowerCase().includes(q) || c.company.toLowerCase().includes(q)).slice(0, 5);
  }, [allContacts, recipient]);

  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files) return;
    for (const file of Array.from(files)) {
      const reader = new FileReader();
      reader.onload = () => {
        const base64 = reader.result as string;
        setAttachments((prev) => [
          ...prev,
          {
            id: uuid(),
            name: file.name,
            data: base64,
            type: file.type,
            size: file.size,
            addedAt: new Date().toISOString(),
          },
        ]);
      };
      reader.readAsDataURL(file);
    }
    if (fileInputRef.current) fileInputRef.current.value = '';
  };

  const removeAttachment = (id: string) => {
    setAttachments((prev) => prev.filter((a) => a.id !== id));
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit({
      direction,
      documentType,
      subject,
      date,
      sender,
      senderContactId: senderContactId || undefined,
      recipient,
      recipientContactId: recipientContactId || undefined,
      company,
      status,
      deadline: deadline || undefined,
      linkedEntryIds,
      attachments,
      trackedDeadlines: trackedDeadlines.length > 0 ? trackedDeadlines : undefined,
      notes,
      tags: initial?.tags ?? [],
      visibility: initial?.visibility ?? 'all',
    });
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {/* Row 1: Direction + Document type + Date */}
      <div className="grid gap-4 sm:grid-cols-3">
        <div>
          <Label>Direcție</Label>
          <Select value={direction} onValueChange={(v) => setDirection(v as RegistryDirection)}>
            <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
            <SelectContent>
              <SelectItem value="intrat">Intrat</SelectItem>
              <SelectItem value="iesit">Ieșit</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label>Tip document</Label>
          <Select value={documentType} onValueChange={(v) => setDocumentType(v as DocumentType)}>
            <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
            <SelectContent>
              {(Object.entries(DOC_TYPE_LABELS) as [DocumentType, string][]).map(([key, label]) => (
                <SelectItem key={key} value={key}>{label}</SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label>Data</Label>
          <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} className="mt-1" />
        </div>
      </div>

      {/* Subject */}
      <div>
        <Label>Subiect *</Label>
        <Input value={subject} onChange={(e) => setSubject(e.target.value)} className="mt-1" required />
      </div>

      {/* Sender / Recipient with autocomplete */}
      <div className="grid gap-4 sm:grid-cols-2">
        <div className="relative">
          <Label>Expeditor</Label>
          <Input
            value={sender}
            onChange={(e) => { setSender(e.target.value); setSenderContactId(''); }}
            onFocus={() => setSenderFocused(true)}
            onBlur={() => setTimeout(() => setSenderFocused(false), 200)}
            className="mt-1"
            placeholder="Nume sau companie..."
          />
          {senderFocused && senderSuggestions.length > 0 && (
            <div className="absolute z-10 mt-1 w-full rounded-md border bg-popover p-1 shadow-md">
              {senderSuggestions.map((c) => (
                <button
                  key={c.id}
                  type="button"
                  className="w-full rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
                  onMouseDown={() => {
                    setSender(c.company ? `${c.name} (${c.company})` : c.name);
                    setSenderContactId(c.id);
                    setSenderFocused(false);
                  }}
                >
                  <span className="font-medium">{c.name}</span>
                  {c.company && <span className="ml-1 text-muted-foreground text-xs">{c.company}</span>}
                </button>
              ))}
            </div>
          )}
        </div>
        <div className="relative">
          <Label>Destinatar</Label>
          <Input
            value={recipient}
            onChange={(e) => { setRecipient(e.target.value); setRecipientContactId(''); }}
            onFocus={() => setRecipientFocused(true)}
            onBlur={() => setTimeout(() => setRecipientFocused(false), 200)}
            className="mt-1"
            placeholder="Nume sau companie..."
          />
          {recipientFocused && recipientSuggestions.length > 0 && (
            <div className="absolute z-10 mt-1 w-full rounded-md border bg-popover p-1 shadow-md">
              {recipientSuggestions.map((c) => (
                <button
                  key={c.id}
                  type="button"
                  className="w-full rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
                  onMouseDown={() => {
                    setRecipient(c.company ? `${c.name} (${c.company})` : c.name);
                    setRecipientContactId(c.id);
                    setRecipientFocused(false);
                  }}
                >
                  <span className="font-medium">{c.name}</span>
                  {c.company && <span className="ml-1 text-muted-foreground text-xs">{c.company}</span>}
                </button>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Company + Status + Deadline */}
      <div className="grid gap-4 sm:grid-cols-3">
        <div>
          <Label>Companie</Label>
          <Select value={company} onValueChange={(v) => setCompany(v as CompanyId)}>
            <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
            <SelectContent>
              <SelectItem value="beletage">Beletage</SelectItem>
              <SelectItem value="urban-switch">Urban Switch</SelectItem>
              <SelectItem value="studii-de-teren">Studii de Teren</SelectItem>
              <SelectItem value="group">Grup</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label>Status</Label>
          <Select value={status} onValueChange={(v) => setStatus(v as RegistryStatus)}>
            <SelectTrigger className="mt-1"><SelectValue /></SelectTrigger>
            <SelectContent>
              <SelectItem value="deschis">Deschis</SelectItem>
              <SelectItem value="inchis">Închis</SelectItem>
            </SelectContent>
          </Select>
        </div>
        <div>
          <Label>Termen limită</Label>
          <Input type="date" value={deadline} onChange={(e) => setDeadline(e.target.value)} className="mt-1" />
        </div>
      </div>

      {/* Linked entries */}
      {allEntries && allEntries.length > 0 && (
        <div>
          <Label>Înregistrări legate</Label>
          <div className="mt-1.5 flex flex-wrap gap-1.5">
            {allEntries
              .filter((e) => e.id !== initial?.id)
              .slice(0, 20)
              .map((e) => (
                <button
                  key={e.id}
                  type="button"
                  onClick={() => {
                    setLinkedEntryIds((prev) =>
                      prev.includes(e.id) ? prev.filter((id) => id !== e.id) : [...prev, e.id]
                    );
                  }}
                  className={`rounded border px-2 py-0.5 text-xs transition-colors ${
                    linkedEntryIds.includes(e.id)
                      ? 'border-primary bg-primary/10 text-primary'
                      : 'border-muted-foreground/30 text-muted-foreground hover:border-primary/50'
                  }`}
                >
                  {e.number}
                </button>
              ))}
          </div>
        </div>
      )}

      {/* Tracked Deadlines */}
      <div>
        <div className="flex items-center justify-between">
          <Label className="flex items-center gap-1.5">
            <Clock className="h-3.5 w-3.5" />
            Termene legale
          </Label>
          <Button type="button" variant="outline" size="sm" onClick={() => setDeadlineAddOpen(true)}>
            <Plus className="mr-1 h-3.5 w-3.5" /> Adaugă termen
          </Button>
        </div>
        {trackedDeadlines.length > 0 && (
          <div className="mt-2 space-y-2">
            {trackedDeadlines.map((dl) => (
              <DeadlineCard
                key={dl.id}
                deadline={dl}
                onResolve={setResolvingDeadline}
                onRemove={handleRemoveDeadline}
              />
            ))}
          </div>
        )}
        {trackedDeadlines.length === 0 && (
          <p className="mt-2 text-xs text-muted-foreground">
            Niciun termen legal. Apăsați &quot;Adaugă termen&quot; pentru a urmări un termen.
          </p>
        )}
      </div>

      <DeadlineAddDialog
        open={deadlineAddOpen}
        onOpenChange={setDeadlineAddOpen}
        entryDate={date}
        onAdd={handleAddDeadline}
      />

      <DeadlineResolveDialog
        open={resolvingDeadline !== null}
        deadline={resolvingDeadline}
        onOpenChange={(open) => { if (!open) setResolvingDeadline(null); }}
        onResolve={handleResolveDeadline}
      />

      {/* Attachments */}
      <div>
        <div className="flex items-center justify-between">
          <Label>Atașamente</Label>
          <Button type="button" variant="outline" size="sm" onClick={() => fileInputRef.current?.click()}>
            <Paperclip className="mr-1 h-3.5 w-3.5" /> Adaugă fișier
          </Button>
          <input
            ref={fileInputRef}
            type="file"
            multiple
            accept=".pdf,.jpg,.jpeg,.png,.doc,.docx,.xls,.xlsx"
            onChange={handleFileUpload}
            className="hidden"
          />
        </div>
        {attachments.length > 0 && (
          <div className="mt-2 space-y-1">
            {attachments.map((att) => (
              <div key={att.id} className="flex items-center gap-2 rounded border px-2 py-1 text-sm">
                <Paperclip className="h-3 w-3 text-muted-foreground" />
                <span className="flex-1 truncate">{att.name}</span>
                <Badge variant="outline" className="text-[10px]">
                  {(att.size / 1024).toFixed(0)} KB
                </Badge>
                <button type="button" onClick={() => removeAttachment(att.id)} className="text-destructive">
                  <X className="h-3.5 w-3.5" />
                </button>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* Notes */}
      <div>
        <Label>Note</Label>
        <Textarea value={notes} onChange={(e) => setNotes(e.target.value)} rows={3} className="mt-1" />
      </div>

      <div className="flex justify-end gap-2 pt-2">
        <Button type="button" variant="outline" onClick={onCancel}>Anulează</Button>
        <Button type="submit">{initial ? 'Actualizează' : 'Adaugă'}</Button>
      </div>
    </form>
  );
}