// Detail content cho 1 ngân sách. Flat render (no tabs):
// Section 1 = Thông tin Header
// Section 2 = Hạng mục (table CRUD inline)
// Approvals + Changelog → moved sang Panel 3 (BudgetWorkflowPanel).
import { useState } from 'react'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { useNavigate } from 'react-router-dom'
import { toast } from 'sonner'
import { Pencil, Plus, Trash2 } from 'lucide-react'
import { Button } from '@/components/ui/Button'
import { Dialog } from '@/components/ui/Dialog'
import { Input } from '@/components/ui/Input'
import { Label } from '@/components/ui/Label'
import { api } from '@/lib/api'
import { getErrorMessage } from '@/lib/apiError'
import { cn } from '@/lib/cn'
import {
  BudgetPhase,
  BudgetPhaseColor,
  BudgetPhaseLabel,
  type BudgetChangelog,
  type BudgetDetailBundle,
  type BudgetDetailBody,
  type BudgetDetailRow,
} from '@/types/budget'

const fmtMoney = (v: number) => v.toLocaleString('vi-VN')

export function BudgetDetailTabs({
  budget,
  onBack,
  onDelete,
  readOnly = false,
}: {
  budget: BudgetDetailBundle
  onBack: () => void
  onDelete: () => void
  /** Menu "Duyệt" — ẩn mọi action thêm/sửa/xóa, chỉ xem + duyệt phase. */
  readOnly?: boolean
}) {
  const navigate = useNavigate()
  const isDraft = budget.phase === BudgetPhase.DangSoanThao

  return (
    <div className="rounded-lg border border-slate-200 bg-white shadow-sm">
      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-slate-200 px-5 py-3">
        <div>
          <div className="flex items-center gap-2">
            <h2 className="text-base font-semibold text-slate-900">{budget.tenNganSach}</h2>
            <span className={cn('rounded px-1.5 py-0.5 text-[11px] font-medium', BudgetPhaseColor[budget.phase])}>
              {BudgetPhaseLabel[budget.phase]}
            </span>
            {readOnly && (
              <span className="rounded bg-slate-100 px-1.5 py-0.5 text-[11px] font-medium text-slate-600">
                chế độ duyệt
              </span>
            )}
          </div>
          <div className="mt-0.5 flex flex-wrap items-center gap-2 text-[12px] text-slate-500">
            <span className="font-mono">{budget.maNganSach ?? '—'}</span>
            <span>·</span>
            <span>Năm {budget.namNganSach}</span>
            <span>·</span>
            <span>{budget.projectName}</span>
            {budget.drafterName && (<><span>·</span><span>Soạn: {budget.drafterName}</span></>)}
          </div>
        </div>
        <div className="flex gap-2">
          {isDraft && !readOnly && (
            <>
              <Button
                variant="ghost"
                onClick={() => navigate(`/budgets/new?id=${budget.id}`)}
                className="gap-1.5 text-xs"
              >
                <Pencil className="h-3.5 w-3.5" /> Sửa header
              </Button>
              <Button variant="danger" onClick={onDelete} className="gap-1.5 text-xs">
                <Trash2 className="h-3.5 w-3.5" /> Xóa
              </Button>
            </>
          )}
          <Button variant="ghost" onClick={onBack} className="text-xs">← Đóng</Button>
        </div>
      </div>

      <div className="divide-y divide-slate-200">
        <Section title="Thông tin">
          <InfoTab budget={budget} />
        </Section>
        <Section title={`Hạng mục (${budget.details.length}) — Tổng: ${fmtMoney(budget.tongNganSach)} đ`}>
          <ItemsTab budget={budget} readOnly={readOnly} />
        </Section>
      </div>
    </div>
  )
}

function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
    <section className="px-5 py-4">
      <h3 className="mb-3 text-xs font-semibold uppercase tracking-wide text-slate-500">{title}</h3>
      {children}
    </section>
  )
}

// ===== Exports cho Panel 3 — Approvals history + Changelog =====

export function BudgetApprovalsSection({ budget }: { budget: BudgetDetailBundle }) {
  return (
    <div>
      <h3 className="mb-2 text-sm font-semibold text-slate-900">
        Lịch sử duyệt ({budget.approvals.length})
      </h3>
      <ApprovalsList budget={budget} />
    </div>
  )
}

export function BudgetHistorySection({ budget }: { budget: BudgetDetailBundle }) {
  return (
    <div>
      <h3 className="mb-2 text-sm font-semibold text-slate-900">Lịch sử thay đổi</h3>
      <HistoryList budget={budget} />
    </div>
  )
}

// ===== Section: Thông tin Header =====
function InfoTab({ budget }: { budget: BudgetDetailBundle }) {
  return (
    <dl className="grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
      <Field label="Tên ngân sách" value={budget.tenNganSach} />
      <Field label="Mã ngân sách" value={<span className="font-mono">{budget.maNganSach ?? '—'}</span>} />
      <Field label="Năm ngân sách" value={budget.namNganSach} />
      <Field label="Dự án" value={budget.projectName} />
      <Field label="Phòng ban" value={budget.departmentName ?? '—'} />
      <Field label="Người soạn" value={budget.drafterName ?? '—'} />
      <Field label="Tổng ngân sách" value={<span className="font-semibold text-brand-700">{fmtMoney(budget.tongNganSach)} đ</span>} />
      <Field label="Trạng thái" value={<span className={cn('rounded px-1.5 py-0.5 text-[11px]', BudgetPhaseColor[budget.phase])}>{BudgetPhaseLabel[budget.phase]}</span>} />
      {budget.description && (
        <div className="col-span-2">
          <dt className="text-[11px] uppercase tracking-wide text-slate-400">Mô tả</dt>
          <dd className="mt-0.5 whitespace-pre-wrap text-slate-800">{budget.description}</dd>
        </div>
      )}
    </dl>
  )
}

function Field({ label, value }: { label: string; value: React.ReactNode }) {
  return (
    <div>
      <dt className="text-[11px] uppercase tracking-wide text-slate-400">{label}</dt>
      <dd className="mt-0.5 text-slate-800">{value}</dd>
    </div>
  )
}

// ===== Section: Hạng mục table CRUD =====
function ItemsTab({ budget, readOnly = false }: { budget: BudgetDetailBundle; readOnly?: boolean }) {
  const qc = useQueryClient()
  const [open, setOpen] = useState(false)
  const [editRow, setEditRow] = useState<BudgetDetailRow | null>(null)
  const isDraft = budget.phase === BudgetPhase.DangSoanThao
  const canMutate = !readOnly && isDraft

  const remove = useMutation({
    mutationFn: async (rowId: string) => api.delete(`/budgets/${budget.id}/details/${rowId}`),
    onSuccess: () => {
      toast.success('Đã xóa hạng mục.')
      qc.invalidateQueries({ queryKey: ['budget-detail', budget.id] })
      qc.invalidateQueries({ queryKey: ['budget-list'] })
    },
    onError: e => toast.error(getErrorMessage(e)),
  })

  return (
    <div>
      {canMutate && (
        <div className="mb-3 flex justify-end">
          <Button onClick={() => setOpen(true)} className="gap-1.5 text-xs">
            <Plus className="h-3.5 w-3.5" /> Thêm hạng mục
          </Button>
        </div>
      )}
      {budget.details.length === 0 ? (
        <p className="text-sm text-slate-500">
          {canMutate ? 'Chưa có hạng mục nào. Thêm để bắt đầu lập ngân sách.' : 'Chưa có hạng mục.'}
        </p>
      ) : (
        <div className="overflow-x-auto">
          <table className="min-w-full text-sm">
            <thead className="bg-slate-50 text-xs uppercase text-slate-500">
              <tr>
                <th className="px-2 py-2 text-left">#</th>
                <th className="px-2 py-2 text-left">Nhóm</th>
                <th className="px-2 py-2 text-left">Mã / Nội dung</th>
                <th className="px-2 py-2 text-left">ĐVT</th>
                <th className="px-2 py-2 text-right">KL</th>
                <th className="px-2 py-2 text-right">Đơn giá</th>
                <th className="px-2 py-2 text-right">Thành tiền</th>
                {canMutate && <th className="px-2 py-2"></th>}
              </tr>
            </thead>
            <tbody className="divide-y divide-slate-100">
              {budget.details.map((d, idx) => (
                <tr key={d.id} className="align-top">
                  <td className="px-2 py-2 text-slate-400">{idx + 1}</td>
                  <td className="px-2 py-2">
                    <div className="font-mono text-[11px] text-slate-500">{d.groupCode}</div>
                    <div className="text-[12px] text-slate-700">{d.groupName}</div>
                  </td>
                  <td className="px-2 py-2 max-w-md">
                    {d.itemCode && <div className="font-mono text-[11px] text-slate-500">{d.itemCode}</div>}
                    <div className="text-slate-800">{d.noiDung}</div>
                    {d.ghiChu && <div className="mt-0.5 text-[11px] italic text-slate-500">{d.ghiChu}</div>}
                  </td>
                  <td className="px-2 py-2 text-slate-600">{d.donViTinh ?? '—'}</td>
                  <td className="px-2 py-2 text-right tabular-nums">{fmtMoney(d.khoiLuong)}</td>
                  <td className="px-2 py-2 text-right tabular-nums">{fmtMoney(d.donGia)}</td>
                  <td className="px-2 py-2 text-right font-medium tabular-nums text-slate-900">
                    {fmtMoney(d.thanhTien)}
                  </td>
                  {canMutate && (
                    <td className="px-2 py-2 text-right">
                      <div className="flex justify-end gap-1">
                        <button
                          onClick={() => setEditRow(d)}
                          className="rounded p-1 text-slate-400 hover:bg-slate-100 hover:text-slate-700"
                          title="Sửa"
                        >
                          <Pencil className="h-3.5 w-3.5" />
                        </button>
                        <button
                          onClick={() => {
                            if (confirm('Xóa hạng mục này?')) remove.mutate(d.id)
                          }}
                          className="rounded p-1 text-slate-400 hover:bg-red-50 hover:text-red-600"
                          title="Xóa"
                        >
                          <Trash2 className="h-3.5 w-3.5" />
                        </button>
                      </div>
                    </td>
                  )}
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr className="border-t-2 border-slate-200 bg-slate-50 font-semibold">
                <td colSpan={6} className="px-2 py-2 text-right text-slate-600">Tổng:</td>
                <td className="px-2 py-2 text-right tabular-nums text-brand-700">
                  {fmtMoney(budget.tongNganSach)}
                </td>
                {canMutate && <td></td>}
              </tr>
            </tfoot>
          </table>
        </div>
      )}

      {open && (
        <DetailRowDialog
          budgetId={budget.id}
          onClose={() => setOpen(false)}
        />
      )}
      {editRow && (
        <DetailRowDialog
          budgetId={budget.id}
          existing={editRow}
          onClose={() => setEditRow(null)}
        />
      )}
    </div>
  )
}

// ===== Dialog: Thêm / Sửa hạng mục =====
function DetailRowDialog({
  budgetId,
  existing,
  onClose,
}: {
  budgetId: string
  existing?: BudgetDetailRow
  onClose: () => void
}) {
  const qc = useQueryClient()
  const [form, setForm] = useState<BudgetDetailBody>({
    groupCode: existing?.groupCode ?? '',
    groupName: existing?.groupName ?? '',
    itemCode: existing?.itemCode ?? null,
    noiDung: existing?.noiDung ?? '',
    donViTinh: existing?.donViTinh ?? null,
    khoiLuong: existing?.khoiLuong ?? 0,
    donGia: existing?.donGia ?? 0,
    thanhTien: existing?.thanhTien ?? 0,
    ghiChu: existing?.ghiChu ?? null,
  })

  // Auto-compute thành tiền khi đổi KL/đơn giá (UX nicety)
  function setQty(v: number) {
    const next = { ...form, khoiLuong: v, thanhTien: v * form.donGia }
    setForm(next)
  }
  function setPrice(v: number) {
    const next = { ...form, donGia: v, thanhTien: form.khoiLuong * v }
    setForm(next)
  }

  const save = useMutation({
    mutationFn: async () => {
      const payload = {
        groupCode: form.groupCode,
        groupName: form.groupName,
        itemCode: form.itemCode || null,
        noiDung: form.noiDung,
        donViTinh: form.donViTinh || null,
        khoiLuong: form.khoiLuong,
        donGia: form.donGia,
        thanhTien: form.thanhTien,
        ghiChu: form.ghiChu || null,
      }
      if (existing) {
        return api.put(`/budgets/${budgetId}/details/${existing.id}`, payload)
      }
      return api.post(`/budgets/${budgetId}/details`, payload)
    },
    onSuccess: () => {
      toast.success(existing ? 'Đã cập nhật hạng mục.' : 'Đã thêm hạng mục.')
      qc.invalidateQueries({ queryKey: ['budget-detail', budgetId] })
      qc.invalidateQueries({ queryKey: ['budget-list'] })
      onClose()
    },
    onError: e => toast.error(getErrorMessage(e)),
  })

  return (
    <Dialog
      open
      onClose={onClose}
      title={existing ? 'Sửa hạng mục' : 'Thêm hạng mục'}
      footer={<>
        <Button variant="ghost" onClick={onClose}>Hủy</Button>
        <Button
          onClick={() => save.mutate()}
          disabled={!form.groupCode || !form.groupName || !form.noiDung || save.isPending}
        >
          {existing ? 'Lưu' : 'Thêm'}
        </Button>
      </>}
    >
      <div className="space-y-3">
        <div className="grid grid-cols-2 gap-3">
          <div>
            <Label>Mã nhóm *</Label>
            <Input
              value={form.groupCode}
              onChange={e => setForm({ ...form, groupCode: e.target.value })}
              placeholder="A.I"
            />
          </div>
          <div>
            <Label>Tên nhóm *</Label>
            <Input
              value={form.groupName}
              onChange={e => setForm({ ...form, groupName: e.target.value })}
              placeholder="Vật tư xây dựng"
            />
          </div>
        </div>
        <div>
          <Label>Mã hạng mục</Label>
          <Input
            value={form.itemCode ?? ''}
            onChange={e => setForm({ ...form, itemCode: e.target.value || null })}
          />
        </div>
        <div>
          <Label>Nội dung *</Label>
          <Input
            value={form.noiDung}
            onChange={e => setForm({ ...form, noiDung: e.target.value })}
            placeholder="Bê tông M250"
          />
        </div>
        <div className="grid grid-cols-4 gap-3">
          <div>
            <Label>ĐVT</Label>
            <Input
              value={form.donViTinh ?? ''}
              onChange={e => setForm({ ...form, donViTinh: e.target.value || null })}
              placeholder="m³"
            />
          </div>
          <div>
            <Label>Khối lượng</Label>
            <Input
              type="number"
              step="0.0001"
              value={form.khoiLuong}
              onChange={e => setQty(Number(e.target.value))}
            />
          </div>
          <div>
            <Label>Đơn giá</Label>
            <Input
              type="number"
              step="0.01"
              value={form.donGia}
              onChange={e => setPrice(Number(e.target.value))}
            />
          </div>
          <div>
            <Label>Thành tiền</Label>
            <Input
              type="number"
              step="0.01"
              value={form.thanhTien}
              onChange={e => setForm({ ...form, thanhTien: Number(e.target.value) })}
            />
          </div>
        </div>
        <div>
          <Label>Ghi chú</Label>
          <Input
            value={form.ghiChu ?? ''}
            onChange={e => setForm({ ...form, ghiChu: e.target.value || null })}
          />
        </div>
      </div>
    </Dialog>
  )
}

// ===== Sub: Approvals list =====
function ApprovalsList({ budget }: { budget: BudgetDetailBundle }) {
  if (budget.approvals.length === 0)
    return <p className="text-sm text-slate-500">Chưa có bước duyệt nào.</p>
  return (
    <ol className="space-y-2">
      {budget.approvals.map(a => (
        <li key={a.id} className="rounded border border-slate-200 bg-white p-3 text-sm">
          <div className="flex items-center justify-between">
            <div>
              <span className={cn('rounded px-1.5 py-0.5 text-[11px]', BudgetPhaseColor[a.fromPhase])}>
                {BudgetPhaseLabel[a.fromPhase]}
              </span>
              <span className="mx-2">→</span>
              <span className={cn('rounded px-1.5 py-0.5 text-[11px]', BudgetPhaseColor[a.toPhase])}>
                {BudgetPhaseLabel[a.toPhase]}
              </span>
            </div>
            <span className="text-xs text-slate-500">{new Date(a.approvedAt).toLocaleString('vi-VN')}</span>
          </div>
          <div className="mt-1 text-xs text-slate-500">
            {a.approverName ?? 'Hệ thống'}{a.comment && ` · ${a.comment}`}
          </div>
        </li>
      ))}
    </ol>
  )
}

// ===== Sub: Changelog list =====
function HistoryList({ budget }: { budget: BudgetDetailBundle }) {
  const logs = useQuery({
    queryKey: ['budget-changelog', budget.id],
    queryFn: async () => (await api.get<BudgetChangelog[]>(`/budgets/${budget.id}/changelogs`)).data,
  })
  if (logs.isLoading) return <p className="text-sm text-slate-500">Đang tải…</p>
  if (!logs.data || logs.data.length === 0)
    return <p className="text-sm text-slate-500">Chưa có lịch sử.</p>
  return (
    <ol className="space-y-1.5 text-sm">
      {logs.data.map(l => (
        <li key={l.id} className="border-l-2 border-slate-200 py-1 pl-3">
          <div className="flex items-center justify-between text-xs text-slate-500">
            <span>{l.userName ?? 'Hệ thống'}</span>
            <span>{new Date(l.createdAt).toLocaleString('vi-VN')}</span>
          </div>
          <div className="text-slate-800">{l.summary}</div>
          {l.contextNote && <div className="text-xs text-slate-500">{l.contextNote}</div>}
        </li>
      ))}
    </ol>
  )
}
