import { useMemo, useState } from "react"
import { Briefcase, CheckCircle, Clock, ClockCounterClockwise, Robot, Trash, XCircle } from "@phosphor-icons/react"
import { CaretDown, CaretUp } from "@phosphor-icons/react"
import type { AgentRecord, ApprovalRecord, DocumentRecord, TaskRecord } from "@shared/types"
import { extractApprovalDocumentReferences, type ApprovalDocumentReference } from "@shared/approval-documents"
import { useT } from "../../i18n"
import { formatMoney, formatTime } from "../../lib/formatters"
import { unwrap } from "../../lib/desktop"
import { ActionButton, ConfirmDialog, InlineNotice, Input, StatusPill, TextArea } from "../ui"
import { describeActionError, parseApprovalPayloadJson } from "./execution-utils"
import { SocialDraftPreview } from "./SocialDraftPreview"
import { useAppStore } from "../../state/store"

function getTypeBadgeClass(type: string): string {
  if (type === "hire_agent") return "bg-accent text-primary"
  if (type === "approve_ceo_strategy") return "bg-warning-muted text-warning"
  if (type === "secret_access") return "bg-destructive-muted text-destructive"
  if (type === "social_post") return "bg-accent text-primary"
  if (type === "deliverable_review") return "bg-accent text-primary"
  return "bg-muted text-muted-foreground"
}

function ApprovalDocumentEditor({
  companyId,
  document,
  fallback,
}: {
  companyId: string
  document: DocumentRecord
  fallback?: ApprovalDocumentReference
}) {
  const addToast = useAppStore((s) => s.addToast)
  const [title, setTitle] = useState(document.title)
  const [content, setContent] = useState(document.content ?? "")
  const [saving, setSaving] = useState(false)
  const [saveError, setSaveError] = useState<string | null>(null)

  async function handleSave() {
    if (!title.trim()) {
      setSaveError("Document title is required.")
      return
    }
    setSaving(true)
    setSaveError(null)
    try {
      unwrap(await window.agentCompany.saveDocument({
        id: document.id,
        companyId,
        type: document.type,
        title: title.trim(),
        content,
        authorAgentId: document.authorAgentId ?? null,
        reviewerAgentId: document.reviewerAgentId ?? null,
        projectId: document.projectId ?? null,
        goalId: document.goalId ?? null,
        parentDocId: document.parentDocId ?? null,
        version: document.version,
        status: document.status,
        tagsJson: document.tagsJson,
      }))
      addToast(`Saved document: ${title.trim()}`, "success")
    } catch (error) {
      setSaveError(describeActionError(error))
    } finally {
      setSaving(false)
    }
  }

  return (
    <div className="space-y-3 rounded-lg border border-border px-4 py-3">
      <div className="flex items-center justify-between gap-3">
        <div className="min-w-0">
          <div className="truncate text-[13px] font-medium text-foreground">{fallback?.title ?? document.title}</div>
          <div className="text-[11px] text-muted-foreground">{(fallback?.type ?? document.type).replaceAll("_", " ")} · v{document.version} · {document.status}</div>
        </div>
        <ActionButton label={saving ? "Saving..." : "Save changes"} icon={CheckCircle} tone="accent" onClick={() => void handleSave()} loading={saving} />
      </div>
      {saveError ? <InlineNotice message={saveError} /> : null}
      <Input label="Title" value={title} onChange={setTitle} placeholder="Document title" />
      <TextArea label="Content" value={content} onChange={setContent} rows={12} placeholder="Document content" />
    </div>
  )
}

function ApprovalDocumentsPanel({
  approval,
  documents,
  companyId,
}: {
  approval: ApprovalRecord
  documents?: DocumentRecord[]
  companyId: string
}) {
  const references = useMemo(
    () => extractApprovalDocumentReferences(approval.payloadJson),
    [approval.payloadJson],
  )

  if (references.length === 0) return null

  const fullDocs = documents
    ? references
      .map((reference) => ({
        reference,
        document: documents.find((entry) => entry.id === reference.id) ?? null,
      }))
      .filter((entry): entry is typeof entry & { document: NonNullable<typeof entry.document> } => entry.document != null)
    : []

  return (
    <div className="space-y-3">
      <div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-primary">Linked Documents</div>
      {fullDocs.length > 0 ? fullDocs.map(({ reference, document }) => (
        <ApprovalDocumentEditor
          key={document.id}
          companyId={companyId}
          document={document}
          fallback={reference}
        />
      )) : references.map((reference) => (
        <div key={reference.id} className="rounded-lg border border-border bg-muted px-4 py-3">
          <div className="text-[13px] font-medium text-foreground">{reference.title ?? reference.id}</div>
          <div className="text-[11px] text-muted-foreground">{reference.type?.replaceAll("_", " ") ?? "document"} · {reference.id}</div>
          <div className="mt-2 text-[12px] text-muted-foreground">The linked document is not loaded in the current snapshot yet. Reopen the approval after the next refresh.</div>
        </div>
      ))}
      {approval.impactSummary ? <div className="text-[11px] text-muted-foreground">{approval.impactSummary}</div> : null}
    </div>
  )
}

export function ApprovalInspector({ approval, agents, tasks, documents, companyId, onDecide, onDeleted }: {
  approval: ApprovalRecord; agents: AgentRecord[]; tasks: TaskRecord[]; documents?: DocumentRecord[]; companyId: string
  onDecide: (state: "approved" | "rejected" | "revision_requested", note?: string) => Promise<void>; onDeleted: () => Promise<void>
}) {
  const t = useT()
  const addToast = useAppStore((s) => s.addToast)
  const [decisionNote, setDecisionNote] = useState(""); const [confirmDelete, setConfirmDelete] = useState(false)
  const [actionError, setActionError] = useState<string | null>(null); const [acting, setActing] = useState<"approved"|"rejected"|"revision_requested"|"delete"|null>(null)
  const [scheduleMode, setScheduleMode] = useState<"immediate" | "scheduled">("immediate")
  const [scheduledAt, setScheduledAt] = useState("")
  const [scheduleError, setScheduleError] = useState<string | null>(null)
  const requestingAgent = agents.find((a) => a.id === approval.requestedByAgentId) ?? null
  const relatedTask = tasks.find((t) => t.id === approval.relatedTaskId) ?? null
  const isDecided = approval.state !== "pending"
  const isSocialPost = approval.type === "social_post"

  async function handleDelete() { setActionError(null); setActing("delete"); try { unwrap(await window.agentCompany.deleteApproval({ id: approval.id, companyId })); setConfirmDelete(false); await onDeleted() } catch (e) { setActionError(describeActionError(e)) } finally { setActing(null) } }

  async function handleDecision(state: "approved"|"rejected"|"revision_requested") {
    setActionError(null)
    setScheduleError(null)

    // Validate schedule if social_post and user picked "scheduled"
    if (isSocialPost && state === "approved" && scheduleMode === "scheduled") {
      if (!scheduledAt) {
        setScheduleError("Please select a date and time for scheduling.")
        return
      }
      const chosenTime = new Date(scheduledAt).getTime()
      if (chosenTime <= Date.now()) {
        setScheduleError("Scheduled time must be in the future.")
        return
      }
    }

    setActing(state)
    try {
      // For social_post approvals with a schedule, include the schedule info in the decision note
      let noteForDecision = decisionNote || undefined
      if (isSocialPost && state === "approved" && scheduleMode === "scheduled" && scheduledAt) {
        const scheduleInfo = `[scheduled:${new Date(scheduledAt).toISOString()}]`
        noteForDecision = noteForDecision ? `${noteForDecision} ${scheduleInfo}` : scheduleInfo
      }
      await onDecide(state, noteForDecision)
      if (state === "approved") addToast("Approval granted — agent is moving forward", "success")
      else if (state === "rejected") addToast("Approval rejected", "warn")
      else if (state === "revision_requested") addToast("Revision requested — agent will revise and resubmit", "warn")
    } catch (e) {
      setActionError(describeActionError(e))
    } finally {
      setActing(null)
    }
  }

  // Compute minimum datetime for schedule picker: now + 5 minutes
  const minDatetime = (() => {
    const d = new Date(Date.now() + 5 * 60 * 1000)
    // Format as YYYY-MM-DDTHH:mm for datetime-local input
    const pad = (n: number) => String(n).padStart(2, "0")
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`
  })()

  const socialPlatform = (() => {
    if (!isSocialPost || !approval.payloadJson) return "other"
    try { return (JSON.parse(approval.payloadJson) as { platform?: string }).platform ?? "other" } catch { return "other" }
  })()

  return (
    <div className="space-y-6">
      <ConfirmDialog open={confirmDelete} title={t("exec.deleteApproval")} message={t("exec.deleteApprovalConfirm")} errorMessage={actionError} onConfirm={() => void handleDelete()} onCancel={() => { setActionError(null); setConfirmDelete(false) }} />
      {actionError && !confirmDelete ? <InlineNotice message={actionError} /> : null}
      <div className="border-y border-border py-4 space-y-4">
        <div className="flex items-center gap-3">
          <span className={`rounded-full px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] ${getTypeBadgeClass(approval.type)}`}>{approval.type.replaceAll("_", " ")}</span>
          <StatusPill status={approval.state} />
        </div>
        <div className="text-[13px] font-medium text-foreground">{approval.payloadSummary}</div>
        {approval.impactSummary ? <div className="text-[13px] text-muted-foreground">{approval.impactSummary}</div> : null}
        <div className="grid gap-2 text-[13px] md:grid-cols-2">
          <div className="flex items-center gap-2 text-muted-foreground"><Robot size={14} />Requested by: <span className="font-medium text-foreground">{requestingAgent?.name ?? "Unknown"}</span>{requestingAgent?.role ? <span className="text-[10px] text-muted-foreground">({requestingAgent.role})</span> : null}</div>
          {relatedTask ? <div className="flex items-center gap-2 text-muted-foreground"><Briefcase size={14} />Task: <span className="font-medium text-foreground">{relatedTask.title}</span></div> : null}
          <div className="text-muted-foreground">Created: <span className="font-mono text-foreground">{formatTime(approval.createdAt)}</span></div>
          {approval.updatedAt !== approval.createdAt ? <div className="text-muted-foreground">Updated: <span className="font-mono text-foreground">{formatTime(approval.updatedAt)}</span></div> : null}
        </div>
        {approval.type === "hire_agent" ? (() => { const payload = parseApprovalPayloadJson(approval); const payloadAgentId = typeof payload?.agentId === "string" ? payload.agentId : null; const reqSnap = payload?.requestedConfigurationSnapshot && typeof payload.requestedConfigurationSnapshot === "object" && !Array.isArray(payload.requestedConfigurationSnapshot) ? payload.requestedConfigurationSnapshot as Record<string, unknown> : null; const proposedAgent = (approval.relatedAgentId ? (agents.find((a) => a.id === approval.relatedAgentId) ?? null) : null) ?? (payloadAgentId ? (agents.find((a) => a.id === payloadAgentId) ?? null) : null); const mgrId = proposedAgent?.reportsTo ?? (typeof reqSnap?.reportsTo === "string" ? reqSnap.reportsTo : null); const mgr = mgrId ? (agents.find((a) => a.id === mgrId) ?? null) : null; if (!proposedAgent && !reqSnap) return null; return (
          <div className="rounded-lg border border-[color:var(--primary)] border-opacity-30 bg-accent px-4 py-3"><div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-primary">Proposed Hire</div><div className="grid gap-1.5 text-[12px]">
            <div><span className="text-muted-foreground">Name:</span> <span className="font-medium text-foreground">{proposedAgent?.name ?? (typeof reqSnap?.name === "string" ? reqSnap.name : "Unspecified")}</span></div>
            <div><span className="text-muted-foreground">Role:</span> <span className="text-foreground">{proposedAgent?.role ?? (typeof reqSnap?.role === "string" ? reqSnap.role : "Unspecified")}</span></div>
            {(proposedAgent?.title || typeof reqSnap?.title === "string") ? <div><span className="text-muted-foreground">Title:</span> <span className="text-foreground">{proposedAgent?.title || reqSnap?.title as string}</span></div> : null}
            {(proposedAgent?.capabilities || typeof reqSnap?.capabilities === "string") ? <div><span className="text-muted-foreground">Capabilities:</span> <span className="text-foreground">{proposedAgent?.capabilities || reqSnap?.capabilities as string}</span></div> : null}
            <div><span className="text-muted-foreground">Connector:</span> <span className="font-mono text-foreground">{proposedAgent?.connectorId ?? (typeof reqSnap?.connectorId === "string" ? reqSnap.connectorId : "Unknown")}</span></div>
            <div><span className="text-muted-foreground">Budget:</span> <span className="font-mono text-foreground">{formatMoney(proposedAgent?.budgetMonthlyUsd ?? (typeof reqSnap?.budgetMonthlyUsd === "number" ? reqSnap.budgetMonthlyUsd : 0))}/mo</span></div>
            {mgr ? <div><span className="text-muted-foreground">Reports to:</span> <span className="text-foreground">{mgr.name}</span></div> : null}
          </div></div>) })() : null}
        {approval.type === "approve_ceo_strategy" ? <div className="rounded-lg border border-[color:var(--destructive)] border-opacity-30 bg-warning-muted px-4 py-3"><div className="mb-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-warning">Organization Strategy</div><div className="whitespace-pre-wrap text-[12px] leading-relaxed text-foreground">{approval.payloadSummary}</div></div> : null}
        <ApprovalDocumentsPanel approval={approval} documents={documents} companyId={companyId} />
        {approval.type === "deliverable_review" && !extractApprovalDocumentReferences(approval.payloadJson).length ? <DeliverableReviewPanel approval={approval} documents={documents} agents={agents} /> : null}
        {isSocialPost && approval.payloadJson ? (
          <SocialDraftPreview
            payloadJson={approval.payloadJson}
            platform={socialPlatform}
            isPending={approval.state === "pending"}
          />
        ) : null}
      </div>

      {/* Schedule picker for social_post approvals */}
      {isSocialPost && !isDecided ? (
        <div className="space-y-3">
          <div role="radiogroup" aria-label="Post timing" className="space-y-2">
            <label className="flex cursor-pointer items-center gap-2">
              <span
                role="radio"
                aria-checked={scheduleMode === "immediate"}
                tabIndex={0}
                className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 ${scheduleMode === "immediate" ? "border-[color:var(--primary)]" : "border-border"}`}
                onClick={() => { setScheduleMode("immediate"); setScheduleError(null) }}
                onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") { setScheduleMode("immediate"); setScheduleError(null) } }}
              >
                {scheduleMode === "immediate" ? <span className="h-2 w-2 rounded-full bg-primary" aria-hidden="true" /> : null}
              </span>
              <span className="text-[13px] font-medium text-foreground">Post immediately</span>
            </label>
            <label className="flex cursor-pointer items-center gap-2">
              <span
                role="radio"
                aria-checked={scheduleMode === "scheduled"}
                tabIndex={0}
                className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 ${scheduleMode === "scheduled" ? "border-[color:var(--primary)]" : "border-border"}`}
                onClick={() => setScheduleMode("scheduled")}
                onKeyDown={(e) => { if (e.key === " " || e.key === "Enter") setScheduleMode("scheduled") }}
              >
                {scheduleMode === "scheduled" ? <span className="h-2 w-2 rounded-full bg-primary" aria-hidden="true" /> : null}
              </span>
              <span className="text-[13px] font-medium text-foreground">Schedule for later</span>
            </label>
          </div>
          {scheduleMode === "scheduled" ? (
            <div className="flex items-center gap-2">
              <Clock size={16} className="text-muted-foreground" />
              <input
                type="datetime-local"
                value={scheduledAt}
                min={minDatetime}
                onChange={(e) => { setScheduledAt(e.target.value); setScheduleError(null) }}
                className="rounded-lg border border-border bg-card px-3.5 py-2.5 text-[13px] text-foreground focus:border-[color:var(--primary)] focus:outline-none"
              />
            </div>
          ) : null}
          {scheduleError ? <InlineNotice message={scheduleError} /> : null}
        </div>
      ) : null}

      {!isDecided ? <div><label className="mb-1 block text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">Decision note</label><TextArea value={decisionNote} onChange={setDecisionNote} placeholder="Add a note (optional)" rows={3} /></div> : null}
      <div className="flex flex-wrap gap-3">
        {!isDecided ? <>
          <ActionButton
            label={isSocialPost ? "Approve & Post" : t("exec.approve")}
            tone="accent"
            onClick={() => void handleDecision("approved")}
            icon={CheckCircle}
            loading={acting === "approved"}
          />
          <ActionButton label={t("exec.requestRevision")} onClick={() => void handleDecision("revision_requested")} icon={ClockCounterClockwise} loading={acting === "revision_requested"} />
          <ActionButton label={t("exec.reject")} tone="danger" onClick={() => void handleDecision("rejected")} icon={XCircle} loading={acting === "rejected"} />
        </> : null}
        {isDecided ? <ActionButton label="Delete" onClick={() => setConfirmDelete(true)} icon={Trash} tone="danger" loading={acting === "delete"} /> : null}
      </div>
      {approval.decisionNote ? <div className="border-t border-border pt-4 text-[13px] text-muted-foreground">Last note: {approval.decisionNote}</div> : null}
    </div>
  )
}

function DeliverableReviewPanel({ approval, documents, agents }: { approval: ApprovalRecord; documents?: DocumentRecord[]; agents: AgentRecord[] }) {
  const payload = parseApprovalPayloadJson(approval)
  const docRefs = Array.isArray(payload?.documents) ? payload.documents as Array<{ id: string; type: string; title: string }> : []
  const docIds = Array.isArray(payload?.documentIds) ? payload.documentIds as string[] : docRefs.map((d) => d.id)
  const fullDocs = documents ? docIds.map((id) => documents.find((d) => d.id === id)).filter(Boolean) as DocumentRecord[] : []
  const [expandedDocId, setExpandedDocId] = useState<string | null>(fullDocs.length === 1 ? fullDocs[0]!.id : null)

  return (
    <div className="space-y-3">
      <div className="text-[11px] font-semibold uppercase tracking-[0.08em] text-primary">Deliverable Review</div>
      {fullDocs.length > 0 ? fullDocs.map((doc) => {
        const isExpanded = expandedDocId === doc.id
        const author = doc.authorAgentId ? agents.find((a) => a.id === doc.authorAgentId) : null
        return (
          <div key={doc.id} className="rounded-lg border border-border overflow-hidden">
            <button
              type="button"
              onClick={() => setExpandedDocId(isExpanded ? null : doc.id)}
              className="flex w-full cursor-pointer items-center gap-3 bg-muted px-4 py-3 text-left transition hover:bg-card"
            >
              <span className="shrink-0 rounded-full bg-accent px-2 py-0.5 text-[10px] font-semibold uppercase text-primary">{doc.type.replaceAll("_", " ")}</span>
              <span className="min-w-0 flex-1 truncate text-[13px] font-medium text-foreground">{doc.title}</span>
              {isExpanded ? <CaretUp size={14} className="shrink-0 text-muted-foreground" /> : <CaretDown size={14} className="shrink-0 text-muted-foreground" />}
            </button>
            {isExpanded ? (
              <div className="border-t border-border px-4 py-3">
                {author ? <div className="mb-2 text-[11px] text-muted-foreground">Author: <span className="font-medium text-foreground">{author.name}</span> ({author.role})</div> : null}
                <div className="whitespace-pre-wrap text-[12px] leading-relaxed text-foreground">{doc.content || "No content."}</div>
              </div>
            ) : null}
          </div>
        )
      }) : docRefs.length > 0 ? docRefs.map((doc) => (
        <div key={doc.id} className="flex items-center gap-2 rounded-lg border border-border bg-muted px-4 py-3 text-[12px]">
          <span className="rounded-full bg-accent px-2 py-0.5 text-[10px] font-semibold uppercase text-primary">{doc.type.replaceAll("_", " ")}</span>
          <span className="font-medium text-foreground">{doc.title}</span>
        </div>
      )) : <div className="text-[12px] text-muted-foreground">{approval.payloadSummary}</div>}
      {approval.impactSummary ? <div className="text-[11px] text-muted-foreground">{approval.impactSummary}</div> : null}
    </div>
  )
}