'use client';

/**
 * 항목 상세 뷰 컴포넌트
 *
 * 기획서 스크린샷 3 기준:
 * - 기본 정보: 항목 번호, 항목명, 소개, 상태
 * - 문서 정보: 순서, 문서 번호, 문서, 개정, 시행일
 * - 하단: 삭제, 수정 버튼
 */

import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { ArrowLeft, Edit, GripVertical, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import { useMenuStore } from '@/stores/menuStore';
import { usePermission } from '@/hooks/usePermission';
import { toast } from 'sonner';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { deleteChecklistItem } from './actions';
import type { ChecklistItem } from '@/types/checklist';

interface ItemDetailProps {
  item: ChecklistItem;
  checklistId: string;
}

export function ItemDetail({ item, checklistId }: ItemDetailProps) {
  const router = useRouter();
  const sidebarCollapsed = useMenuStore((state) => state.sidebarCollapsed);
  const { canUpdate, canDelete } = usePermission();
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [isDeleting, setIsDeleting] = useState(false);

  const handleEdit = () => {
    router.push(
      `/ko/master-data/checklist-management/${checklistId}/items/${item.id}?mode=edit`
    );
  };

  const handleBack = () => {
    router.push(`/ko/master-data/checklist-management/${checklistId}?mode=view`);
  };

  const handleDelete = async () => {
    setIsDeleting(true);
    try {
      const result = await deleteChecklistItem(checklistId, item.id);
      if (result.success) {
        toast.success('항목이 삭제되었습니다.');
        router.push(`/ko/master-data/checklist-management/${checklistId}?mode=view`);
      } else {
        toast.error(result.error || '삭제에 실패했습니다.');
      }
    } catch {
      toast.error('삭제 중 오류가 발생했습니다.');
    } finally {
      setIsDeleting(false);
      setShowDeleteDialog(false);
    }
  };

  const documents = item.documents || [];

  return (
    <PageLayout>
      <PageHeader title="항목 상세" />

      <div className="space-y-6 pb-24">
        {/* 기본 정보 */}
        <Card>
          <CardHeader className="bg-muted/50">
            <CardTitle className="text-base">기본 정보</CardTitle>
          </CardHeader>
          <CardContent className="pt-6">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="space-y-1">
                <div className="text-sm text-muted-foreground">항목 번호</div>
                <div className="font-medium font-mono">{item.itemCode}</div>
              </div>
              <div className="space-y-1">
                <div className="text-sm text-muted-foreground">항목명</div>
                <div className="font-medium">{item.itemName}</div>
              </div>
              <div className="space-y-1">
                <div className="text-sm text-muted-foreground">소개</div>
                <div className="font-medium">{item.description || '-'}</div>
              </div>
              <div className="space-y-1">
                <div className="text-sm text-muted-foreground">상태</div>
                <Badge variant={item.status === '사용' ? 'default' : 'secondary'}>
                  {item.status}
                </Badge>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 문서 정보 */}
        <Card>
          <CardHeader className="bg-muted/50">
            <CardTitle className="text-base">문서 정보</CardTitle>
          </CardHeader>
          <CardContent className="p-0">
            {documents.length === 0 ? (
              <div className="p-8 text-center text-muted-foreground">
                등록된 문서가 없습니다.
              </div>
            ) : (
              <div className="overflow-x-auto">
                <table className="w-full" style={{ minWidth: 500 }}>
                  <thead>
                    <tr className="border-b bg-muted/30">
                      <th className="w-10 min-w-[40px] px-3 py-3 text-center text-xs font-medium text-muted-foreground" />
                      <th className="w-14 min-w-[48px] px-3 py-3 text-center text-xs font-medium text-muted-foreground">
                        순서
                      </th>
                      <th className="min-w-[100px] px-3 py-3 text-left text-xs font-medium text-muted-foreground">
                        문서 번호
                      </th>
                      <th className="min-w-[120px] px-3 py-3 text-left text-xs font-medium text-muted-foreground">
                        문서
                      </th>
                      <th className="min-w-[60px] px-3 py-3 text-left text-xs font-medium text-muted-foreground">
                        개정
                      </th>
                      <th className="min-w-[100px] px-3 py-3 text-left text-xs font-medium text-muted-foreground">
                        시행일
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {documents.map((doc) => (
                      <tr key={doc.id} className="border-b hover:bg-muted/50">
                        <td className="w-10 px-3 py-3 text-center">
                          <GripVertical className="h-4 w-4 text-muted-foreground mx-auto" />
                        </td>
                        <td className="w-14 px-3 py-3 text-center text-sm">
                          {doc.order}
                        </td>
                        <td className="px-3 py-3 text-sm font-mono">
                          {doc.documentCode}
                        </td>
                        <td className="px-3 py-3 text-sm text-primary underline cursor-pointer">
                          {doc.documentName}
                        </td>
                        <td className="px-3 py-3 text-sm">{doc.revision}</td>
                        <td className="px-3 py-3 text-sm">{doc.effectiveDate}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* 하단 액션 버튼 (sticky) */}
      <div
        className={`fixed bottom-4 left-4 right-4 px-4 py-3 bg-background/95 backdrop-blur rounded-xl border shadow-lg z-50 transition-all duration-300 md:bottom-6 md:px-6 md:right-[48px] ${sidebarCollapsed ? 'md:left-[156px]' : 'md:left-[316px]'} flex items-center justify-between`}
      >
        <Button variant="outline" onClick={handleBack} size="sm" className="md:size-default">
          <ArrowLeft className="h-4 w-4 md:mr-2" />
          <span className="hidden md:inline">점검표로 돌아가기</span>
        </Button>
        <div className="flex items-center gap-2">
          {canDelete && (
            <Button
              variant="destructive"
              onClick={() => setShowDeleteDialog(true)}
              size="sm"
              className="md:size-default"
            >
              <Trash2 className="h-4 w-4 md:mr-2" />
              <span className="hidden md:inline">삭제</span>
            </Button>
          )}
          {canUpdate && (
            <Button onClick={handleEdit} size="sm" className="md:size-default">
              <Edit className="h-4 w-4 md:mr-2" />
              <span className="hidden md:inline">수정</span>
            </Button>
          )}
        </div>
      </div>

      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>항목 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              &apos;{item.itemName}&apos; 항목을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel disabled={isDeleting}>취소</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDelete}
              disabled={isDeleting}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {isDeleting ? '삭제 중...' : '삭제'}
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </PageLayout>
  );
}
