import { addDocument } from "@/app/admin/clients/[id]/actions";
import { DocumentRow } from "@/components/admin/DocumentRow";
import { TranscriptItem } from "@/components/admin/TranscriptItem";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import type { Document } from "@/db/schema";

type Transcript = {
  id: string;
  title: string | null;
  call_date: string;
  content: string;
  created_at: Date;
};

type Props = {
  documents: Document[];
  clientId: string;
  transcripts?: Transcript[];
};

export async function DocumentsTab({ documents, clientId, transcripts = [] }: Props) {
  return (
    <div className="space-y-8 max-w-lg">
      {/* Add document form */}
      <form
        action={async (fd: FormData) => {
          "use server";
          await addDocument(clientId, fd);
        }}
        className="bg-white border border-[#e5e7eb] rounded-lg p-4 space-y-3"
      >
        <h3 className="font-medium text-[#1a1a1a]">Aggiungi documento</h3>
        <div className="space-y-1">
          <Label htmlFor="doc-label">Nome / etichetta</Label>
          <Input
            id="doc-label"
            name="label"
            placeholder="es. Brief progetto"
            required
          />
        </div>
        <div className="space-y-1">
          <Label htmlFor="doc-url">URL (Google Drive, PDF...)</Label>
          <Input
            id="doc-url"
            name="url"
            type="url"
            placeholder="https://drive.google.com/..."
            required
          />
        </div>
        <Button type="submit" size="sm">
          Aggiungi
        </Button>
      </form>

      {/* Documents list */}
      <div>
        {documents.length === 0 && (
          <p className="text-sm text-[#71717a]">Nessun documento ancora.</p>
        )}
        <div className="space-y-2">
          {documents.map((doc) => (
            <DocumentRow key={doc.id} doc={doc} clientId={clientId} />
          ))}
        </div>
      </div>

      {/* Transcripts section (read-only, expandable via client component) */}
      {transcripts.length > 0 && (
        <div>
          <h3 className="font-medium text-[#1a1a1a] mb-3">Transcript chiamate</h3>
          <div className="space-y-2">
            {transcripts.map((t) => (
              <TranscriptItem key={t.id} transcript={t} />
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
