"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";
import { ClientModal } from "./ClientModal";
import { ConfirmDialog } from "./ConfirmDialog";
import { DocumentsTable } from "./DocumentsTable";
import { AddDocumentModal } from "./AddDocumentModal";
import { deleteClient } from "@/lib/actions/clients";

type DocumentRow = {
  id: string;
  name: string;
  clientName: string | null;
  status: "Draft" | "Sent" | "Viewed" | "Signed";
  sentAt: Date | null;
  clientId: string;
};

type Props = {
  client: { id: string; name: string; email: string };
  docs: DocumentRow[];
};

export function ClientProfileClient({ client, docs }: Props) {
  const router = useRouter();
  const [isEditOpen, setIsEditOpen] = useState(false);
  const [isDeleteOpen, setIsDeleteOpen] = useState(false);
  const [isAddDocOpen, setIsAddDocOpen] = useState(false);

  async function handleDelete() {
    await deleteClient(client.id);
    router.push("/portal/clients");
  }

  return (
    <div>
      {/* Header card */}
      <div style={{ backgroundColor: "white", borderRadius: "1rem", boxShadow: "0 1px 4px rgba(0,0,0,0.07)", padding: "1.5rem", marginBottom: "1.25rem" }}>
        <div style={{ marginBottom: "1rem" }}>
          <Link href="/portal/clients" style={{ color: "#C9A84C", fontSize: "0.875rem", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: "0.25rem" }}>
            <span aria-hidden="true">&larr;</span> Back to Clients
          </Link>
        </div>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}>
          <div>
            <h1 style={{ color: "#1B2B4B", fontSize: "1.5rem", fontWeight: 700, marginBottom: "0.25rem" }}>{client.name}</h1>
            <p style={{ color: "#6B7280", fontSize: "0.875rem" }}>{client.email}</p>
          </div>
          <div style={{ display: "flex", gap: "0.75rem" }}>
            <button
              type="button"
              onClick={() => setIsEditOpen(true)}
              className="px-4 py-2 text-sm font-medium rounded-lg border transition hover:bg-gray-50"
              style={{ borderColor: "#1B2B4B", color: "#1B2B4B" }}
            >
              Edit
            </button>
            <button
              type="button"
              onClick={() => setIsDeleteOpen(true)}
              className="px-4 py-2 text-sm font-medium rounded-lg border border-red-200 text-red-600 transition hover:bg-red-50"
            >
              Delete Client
            </button>
          </div>
        </div>
      </div>

      {/* Documents card */}
      <div style={{ backgroundColor: "white", borderRadius: "1rem", boxShadow: "0 1px 4px rgba(0,0,0,0.07)", overflow: "hidden" }}>
        <div style={{ padding: "1rem 1.5rem", borderBottom: "1px solid #F3F4F6", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
          <h2 style={{ color: "#1B2B4B", fontSize: "1rem", fontWeight: 600 }}>Documents</h2>
          <button
            type="button"
            onClick={() => setIsAddDocOpen(true)}
            className="px-4 py-2 text-sm font-medium rounded-lg transition hover:bg-blue-700"
            style={{ backgroundColor: "#C9A84C", color: "white" }}
          >
            + Add Document
          </button>
        </div>
        {docs.length === 0 ? (
          <div style={{ padding: "3rem", textAlign: "center", color: "#6B7280", fontSize: "0.875rem" }}>No documents yet.</div>
        ) : (
          <DocumentsTable rows={docs} showClientColumn={false} />
        )}
      </div>

      <ClientModal isOpen={isEditOpen} onClose={() => setIsEditOpen(false)} mode="edit" clientId={client.id} defaultName={client.name} defaultEmail={client.email} />
      {isAddDocOpen && (
        <AddDocumentModal clientId={client.id} onClose={() => setIsAddDocOpen(false)} />
      )}
      <ConfirmDialog
        isOpen={isDeleteOpen}
        title="Delete client?"
        message={`Delete ${client.name}? This will also delete all associated documents. This cannot be undone.`}
        onConfirm={handleDelete}
        onCancel={() => setIsDeleteOpen(false)}
      />
    </div>
  );
}
