"use client";

import { useState } from "react";
import { Button, Card } from "@/components/ui";
import { Field, inputClass } from "@/components/ui/form";
import { StatusLine, useRun } from "@/components/features/accounts/use-run";
import { deleteIntegrationAction, setIntegrationEnabledAction, testIntegrationAction } from "@/lib/actions/integrations";
import { INTEGRATION_TYPES, TYPE_INFO, type IntegrationType } from "@/lib/integrations/schema";
import type { IntegrationRow } from "@/lib/services/integrations";
import { IntegrationDialog } from "./integration-dialog";
import { Deliveries, IntegrationStatusBadge } from "./status";

/** A website admin's integrations: add, edit, test, switch off and delete. */
export function IntegrationsManager({ siteId, rows, policies }: { siteId: string; rows: IntegrationRow[]; policies: Record<IntegrationType, boolean> }) {
  const [dialog, setDialog] = useState<{ row?: IntegrationRow; n: number } | null>(null);
  const [armed, setArmed] = useState<string | null>(null);
  const [testEmail, setTestEmail] = useState("");
  const { pending, msg, run } = useRun();
  return (
    <>
      <div className="mb-4 flex items-center justify-between gap-3">
        <StatusLine msg={msg} />
        <Button onClick={() => setDialog({ n: Date.now() })}>Add integration</Button>
      </div>
      <div className="space-y-4">
        {INTEGRATION_TYPES.map((t) => {
          const list = rows.filter((r) => r.type === t);
          return (
            <Card key={t}>
              <div className="border-b border-border px-4 py-3">
                <h2 className="text-sm font-semibold">{TYPE_INFO[t].label}{policies[t] ? <span className="ml-2 text-xs font-normal text-muted-foreground">Needs platform approval</span> : null}</h2>
                <p className="mt-0.5 text-xs text-muted-foreground">{TYPE_INFO[t].description}</p>
              </div>
              {list.length === 0 ? <p className="px-4 py-4 text-sm text-muted-foreground">None added yet.</p> : (
                <ul className="divide-y divide-border">
                  {list.map((r) => (
                    <li key={r.id} className="space-y-3 px-4 py-3">
                      <div className="flex flex-wrap items-start justify-between gap-3">
                        <div><p className="font-medium">{r.name} <IntegrationStatusBadge status={r.status} /></p><p className="text-sm text-muted-foreground">{r.summary}</p>
                          {r.status === "PENDING" ? <p className="mt-1 text-xs text-muted-foreground">Waiting for a platform administrator. It will start working once approved.</p> : null}
                          {r.reviewNote && (r.status === "REJECTED" || r.status === "ACTIVE") ? <p className="mt-1 text-xs">Reviewer note: {r.reviewNote}</p> : null}
                        </div>
                        <div className="flex flex-wrap items-center gap-2">
                          <Button variant="secondary" onClick={() => setDialog({ row: r, n: Date.now() })} aria-label={`Edit ${r.name}`}>Edit</Button>
                          {(r.status === "ACTIVE" || r.status === "DISABLED") ? <Button variant="secondary" disabled={pending} onClick={() => run(() => setIntegrationEnabledAction(siteId, r.id, r.status === "DISABLED"))} aria-label={`${r.status === "ACTIVE" ? "Disable" : "Enable"} ${r.name}`}>{r.status === "ACTIVE" ? "Disable" : "Enable"}</Button> : null}
                          {r.type === "webhook" && r.status === "ACTIVE" ? <Button variant="secondary" disabled={pending} onClick={() => run(() => testIntegrationAction(siteId, r.id))} aria-label={`Send test to ${r.name}`}>Send test</Button> : null}
                          {armed === r.id ? (
                            <><Button variant="danger" disabled={pending} onClick={() => run(() => deleteIntegrationAction(siteId, r.id), () => setArmed(null))}>Confirm delete</Button><Button variant="ghost" onClick={() => setArmed(null)}>Cancel</Button></>
                          ) : <Button variant="secondary" onClick={() => setArmed(r.id)} aria-label={`Delete ${r.name}`}>Delete</Button>}
                        </div>
                      </div>
                      {r.type === "smtp" && r.status === "ACTIVE" ? (
                        <form className="flex flex-wrap items-end gap-2" onSubmit={(e) => { e.preventDefault(); run(() => testIntegrationAction(siteId, r.id, testEmail)); }}>
                          <Field id={`te-${r.id}`} label="Send a test email to"><input id={`te-${r.id}`} type="email" required value={testEmail} onChange={(e) => setTestEmail(e.target.value)} className={inputClass} /></Field>
                          <Button type="submit" variant="secondary" disabled={pending}>Send test email</Button>
                        </form>
                      ) : null}
                      {r.type === "webhook" || r.type === "smtp" ? <details><summary className="cursor-pointer text-xs text-muted-foreground">Recent activity</summary><div className="mt-2"><Deliveries rows={r.deliveries} /></div></details> : null}
                    </li>
                  ))}
                </ul>
              )}
            </Card>
          );
        })}
      </div>
      {dialog ? <IntegrationDialog key={dialog.n} siteId={siteId} open onClose={() => setDialog(null)} row={dialog.row} policies={policies} /> : null}
    </>
  );
}