'use client'

import { useEffect, useState } from 'react'
import Link from 'next/link'
import { useParams } from 'next/navigation'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { useTranslation } from 'react-i18next'
import { ArrowLeft, Download, Save } from 'lucide-react'
import { toast } from 'sonner'
import { api, type Inspection } from '@/lib/api'
import { Button } from '@/components/ui/Button'
import { Card } from '@/components/ui/Card'
import { Badge } from '@/components/ui/Badge'
import { Select } from '@/components/ui/Select'
import { Input } from '@/components/ui/Input'

type ItemDraft = {
  item_key: string
  label: string
  result: string
  notes: string
  photo_path: string
}

export function InspectionDetailPage() {
  const { t } = useTranslation()
  const params = useParams()
  const id = params?.id as string
  const queryClient = useQueryClient()
  const [items, setItems] = useState<ItemDraft[]>([])
  const [issueTitle, setIssueTitle] = useState('')

  const { data, refetch, isLoading } = useQuery({
    queryKey: ['inspection', id],
    queryFn: () => api.get<{ data: Inspection }>(`/inspections/${id}`),
    enabled: Boolean(id),
  })

  useEffect(() => {
    const ins = data?.data?.data
    if (!ins?.items) return
    setItems(
      ins.items.map((i) => ({
        item_key: i.item_key,
        label: i.label,
        result: i.result ?? '',
        notes: i.notes ?? '',
        photo_path: i.photo_path ?? '',
      })),
    )
  }, [data])

  const inspection = data?.data?.data

  const saveItems = useMutation({
    mutationFn: () => api.post(`/inspections/${id}/items`, { items }),
    onSuccess: () => {
      toast.success(t('inspections.messages.itemsSaved'))
      refetch()
    },
    onError: (err: { response?: { data?: { message?: string } } }) => {
      toast.error(err?.response?.data?.message || t('common.somethingWentWrong'))
    },
  })

  const transition = useMutation({
    mutationFn: (action: string) => api.post(`/inspections/${id}/${action}`),
    onSuccess: () => {
      toast.success(t('inspections.messages.statusUpdated'))
      refetch()
      queryClient.invalidateQueries({ queryKey: ['inspections'] })
    },
    onError: (err: { response?: { data?: { message?: string } } }) => {
      toast.error(err?.response?.data?.message || t('common.somethingWentWrong'))
    },
  })

  const createIssue = useMutation({
    mutationFn: () =>
      api.post('/issues', {
        title: issueTitle,
        inspection_id: Number(id),
        project_id: inspection?.project_id,
        site_id: inspection?.site_id,
      }),
    onSuccess: () => {
      toast.success(t('inspections.messages.issueCreated'))
      setIssueTitle('')
      refetch()
      queryClient.invalidateQueries({ queryKey: ['issues'] })
    },
    onError: () => toast.error(t('common.somethingWentWrong')),
  })

  const handleExport = async () => {
    try {
      const res = await api.get(`/inspections/${id}/export/pdf`, { responseType: 'blob' })
      const url = window.URL.createObjectURL(new Blob([res.data as BlobPart]))
      const a = document.createElement('a')
      a.href = url
      a.download = `inspection_${id}.pdf`
      a.click()
      window.URL.revokeObjectURL(url)
    } catch {
      toast.error(t('common.somethingWentWrong'))
    }
  }

  if (isLoading || !inspection) {
    return <div className="p-6 text-sm text-[var(--text-muted)]">{t('common.loading')}</div>
  }

  const canEditItems = ['draft', 'rejected'].includes(inspection.status)

  return (
    <div className="space-y-5">
      <div className="animate-fade-in-up flex flex-wrap items-center justify-between gap-3">
        <div className="flex flex-wrap items-center gap-3">
          <Link href="/inspections">
            <button
              type="button"
              className="premium-chip press-btn flex items-center gap-1.5 rounded-xl px-3 py-2 text-sm"
            >
              <ArrowLeft size={15} />
              {t('common.back')}
            </button>
          </Link>
          <h1 className="premium-heading text-2xl font-bold">{inspection.inspection_number}</h1>
          <Badge variant="muted">
            {t(`inspections.status.${inspection.status}`, inspection.status)}
          </Badge>
        </div>
        <div className="flex flex-wrap gap-2">
          <Button size="sm" variant="secondary" onClick={handleExport}>
            <Download size={14} />
            PDF
          </Button>
          {canEditItems && (
            <Button size="sm" onClick={() => transition.mutate('submit')}>
              {t('inspections.submit')}
            </Button>
          )}
          {inspection.status === 'submitted' && (
            <>
              <Button size="sm" onClick={() => transition.mutate('approve')}>
                {t('inspections.approve')}
              </Button>
              <Button size="sm" variant="secondary" onClick={() => transition.mutate('reject')}>
                {t('inspections.reject')}
              </Button>
            </>
          )}
        </div>
      </div>

      <Card elevated>
        <div className="grid gap-3 sm:grid-cols-3 text-sm">
          <div>
            <div className="text-xs text-[var(--text-muted)]">{t('inspections.project')}</div>
            <div className="font-medium">{inspection.project?.name ?? '—'}</div>
          </div>
          <div>
            <div className="text-xs text-[var(--text-muted)]">{t('inspections.site')}</div>
            <div className="font-medium">{inspection.site?.name ?? '—'}</div>
          </div>
          <div>
            <div className="text-xs text-[var(--text-muted)]">{t('inspections.template')}</div>
            <div className="font-medium">{inspection.template?.name ?? '—'}</div>
          </div>
        </div>
      </Card>

      <Card elevated>
        <div className="mb-3 flex items-center justify-between">
          <h3 className="text-sm font-semibold">{t('inspections.checklist')}</h3>
          {canEditItems && (
            <Button size="sm" onClick={() => saveItems.mutate()} disabled={saveItems.isPending}>
              <Save size={14} />
              {t('common.save')}
            </Button>
          )}
        </div>
        <div className="space-y-3">
          {items.map((item, idx) => (
            <div
              key={item.item_key}
              className="grid gap-2 rounded-xl border border-[var(--premium-divider)] p-3 sm:grid-cols-4"
            >
              <div className="sm:col-span-4 text-sm font-medium">{item.label}</div>
              <Select
                value={item.result}
                disabled={!canEditItems}
                onChange={(e) =>
                  setItems((prev) =>
                    prev.map((it, i) => (i === idx ? { ...it, result: e.target.value } : it)),
                  )
                }
                options={[
                  { value: '', label: '—' },
                  { value: 'pass', label: t('inspections.result.pass') },
                  { value: 'fail', label: t('inspections.result.fail') },
                  { value: 'na', label: t('inspections.result.na') },
                ]}
              />
              <Input
                placeholder={t('inspections.notes')}
                value={item.notes}
                disabled={!canEditItems}
                onChange={(e) =>
                  setItems((prev) =>
                    prev.map((it, i) => (i === idx ? { ...it, notes: e.target.value } : it)),
                  )
                }
              />
              <Input
                placeholder={t('inspections.photoPath')}
                value={item.photo_path}
                disabled={!canEditItems}
                onChange={(e) =>
                  setItems((prev) =>
                    prev.map((it, i) => (i === idx ? { ...it, photo_path: e.target.value } : it)),
                  )
                }
              />
            </div>
          ))}
          {!items.length && (
            <p className="text-sm text-[var(--text-muted)]">{t('inspections.noItems')}</p>
          )}
        </div>
      </Card>

      <Card elevated>
        <h3 className="mb-3 text-sm font-semibold">{t('inspections.issues')}</h3>
        <div className="mb-3 flex flex-wrap gap-2">
          <Input
            value={issueTitle}
            onChange={(e) => setIssueTitle(e.target.value)}
            placeholder={t('inspections.issueTitle')}
          />
          <Button
            size="sm"
            disabled={!issueTitle.trim() || createIssue.isPending}
            onClick={() => createIssue.mutate()}
          >
            {t('inspections.addIssue')}
          </Button>
        </div>
        <ul className="space-y-2 text-sm">
          {(inspection.issues ?? []).map((issue) => (
            <li key={issue.id} className="flex justify-between border-t border-[var(--premium-divider)] pt-2">
              <span>
                {issue.issue_number} — {issue.title}
              </span>
              <Badge variant="muted">{t(`inspections.issueStatus.${issue.status}`, issue.status)}</Badge>
            </li>
          ))}
        </ul>
      </Card>
    </div>
  )
}