'use client';

import { useState, useCallback, useMemo, useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { format } from 'date-fns';
import {
  Receipt,
  Save,
  Trash2,
  Plus,
  X,
  Send,
  FileText,
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Switch } from '@/components/ui/switch';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import type { SalesRecord, SalesItem, SalesType, Vendor } from './types';
import { SALES_TYPE_LABELS, SALES_TYPE_OPTIONS } from './types';

// ===== Props =====
interface SalesDetailProps {
  mode: 'view' | 'edit' | 'new';
  salesId?: string;
}

// ===== Mock 거래처 데이터 =====
const MOCK_VENDORS: Vendor[] = [
  { id: 'v1', name: '(주)삼성전자', email: 'samsung@example.com' },
  { id: 'v2', name: '현대자동차', email: 'hyundai@example.com' },
  { id: 'v3', name: 'LG전자', email: 'lg@example.com' },
  { id: 'v4', name: 'SK하이닉스', email: 'skhynix@example.com' },
  { id: 'v5', name: '네이버', email: 'naver@example.com' },
];

// ===== 초기 품목 데이터 =====
const createEmptyItem = (): SalesItem => ({
  id: `item-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
  itemName: '',
  quantity: 0,
  unitPrice: 0,
  supplyAmount: 0,
  vat: 0,
  note: '',
});

// ===== Mock 상세 데이터 조회 =====
const fetchSalesDetail = (id: string): SalesRecord | null => {
  // 실제로는 API 호출
  return {
    id,
    salesNo: 'SL-2025-0001',
    salesDate: '2025-12-12',
    vendorId: 'v1',
    vendorName: '(주)삼성전자',
    salesType: 'product',
    accountSubject: 'product',
    items: [
      {
        id: 'item-1',
        itemName: '품목명',
        quantity: 10,
        unitPrice: 100000,
        supplyAmount: 1000000,
        vat: 100000,
        note: '',
      },
    ],
    totalSupplyAmount: 1000000,
    totalVat: 100000,
    totalAmount: 1100000,
    receivedAmount: 0,
    outstandingAmount: 1100000,
    taxInvoiceIssued: false,
    transactionStatementIssued: false,
    note: '',
    status: 'outstanding',
    createdAt: new Date().toISOString(),
    updatedAt: new Date().toISOString(),
  };
};

export function SalesDetail({ mode, salesId }: SalesDetailProps) {
  const router = useRouter();
  const isViewMode = mode === 'view';
  const isNewMode = mode === 'new';

  // ===== 폼 상태 =====
  const [salesNo, setSalesNo] = useState('');
  const [salesDate, setSalesDate] = useState(format(new Date(), 'yyyy-MM-dd'));
  const [vendorId, setVendorId] = useState('');
  const [salesType, setSalesType] = useState<SalesType>('product');
  const [items, setItems] = useState<SalesItem[]>([createEmptyItem()]);
  const [taxInvoiceIssued, setTaxInvoiceIssued] = useState(false);
  const [transactionStatementIssued, setTransactionStatementIssued] = useState(false);

  // ===== 알림 다이얼로그 상태 =====
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
  const [showEmailAlert, setShowEmailAlert] = useState(false);
  const [emailAlertMessage, setEmailAlertMessage] = useState('');

  // ===== 데이터 로드 (수정 모드) =====
  useEffect(() => {
    if (salesId && mode !== 'new') {
      const data = fetchSalesDetail(salesId);
      if (data) {
        setSalesNo(data.salesNo);
        setSalesDate(data.salesDate);
        setVendorId(data.vendorId);
        setSalesType(data.salesType);
        setItems(data.items.length > 0 ? data.items : [createEmptyItem()]);
        setTaxInvoiceIssued(data.taxInvoiceIssued);
        setTransactionStatementIssued(data.transactionStatementIssued);
      }
    } else if (isNewMode) {
      // 신규: 자동 채번
      setSalesNo(`SL-2025-${String(Math.floor(Math.random() * 10000)).padStart(4, '0')}`);
    }
  }, [salesId, mode, isNewMode]);

  // ===== 선택된 거래처 정보 =====
  const selectedVendor = useMemo(() => {
    return MOCK_VENDORS.find(v => v.id === vendorId);
  }, [vendorId]);

  // ===== 합계 계산 =====
  const totals = useMemo(() => {
    const totalSupply = items.reduce((sum, item) => sum + item.supplyAmount, 0);
    const totalVat = items.reduce((sum, item) => sum + item.vat, 0);
    return {
      supplyAmount: totalSupply,
      vat: totalVat,
      total: totalSupply + totalVat,
    };
  }, [items]);

  // ===== 품목 수정 핸들러 =====
  const handleItemChange = useCallback((index: number, field: keyof SalesItem, value: string | number) => {
    setItems(prev => {
      const newItems = [...prev];
      const item = { ...newItems[index] };

      if (field === 'quantity' || field === 'unitPrice') {
        const numValue = typeof value === 'string' ? parseFloat(value) || 0 : value;
        item[field] = numValue;
        // 자동 계산
        item.supplyAmount = item.quantity * item.unitPrice;
        item.vat = Math.floor(item.supplyAmount * 0.1);
      } else {
        (item as any)[field] = value;
      }

      newItems[index] = item;
      return newItems;
    });
  }, []);

  // ===== 품목 추가 =====
  const handleAddItem = useCallback(() => {
    setItems(prev => [...prev, createEmptyItem()]);
  }, []);

  // ===== 품목 삭제 =====
  const handleRemoveItem = useCallback((index: number) => {
    setItems(prev => {
      if (prev.length <= 1) return prev; // 최소 1개 유지
      return prev.filter((_, i) => i !== index);
    });
  }, []);

  // ===== 저장 =====
  const handleSave = useCallback(() => {
    console.log('저장:', {
      salesNo,
      salesDate,
      vendorId,
      salesType,
      items,
      taxInvoiceIssued,
      transactionStatementIssued,
      totals,
    });
    router.push('/ko/accounting/sales');
  }, [salesNo, salesDate, vendorId, salesType, items, taxInvoiceIssued, transactionStatementIssued, totals, router]);

  // ===== 삭제 =====
  const handleDelete = useCallback(() => {
    console.log('삭제:', salesId);
    setShowDeleteDialog(false);
    router.push('/ko/accounting/sales');
  }, [salesId, router]);

  // ===== 목록으로 이동 =====
  const handleBack = useCallback(() => {
    router.push('/ko/accounting/sales');
  }, [router]);

  // ===== 수정 모드로 이동 =====
  const handleEdit = useCallback(() => {
    if (salesId) {
      router.push(`/ko/accounting/sales/${salesId}?mode=edit`);
    }
  }, [router, salesId]);

  // ===== 취소 (수정/등록 모드에서) =====
  const handleCancel = useCallback(() => {
    if (isNewMode) {
      router.push('/ko/accounting/sales');
    } else if (salesId) {
      router.push(`/ko/accounting/sales/${salesId}`);
    }
  }, [router, salesId, isNewMode]);

  // ===== 거래명세서 발행 =====
  const handleSendTransactionStatement = useCallback(() => {
    if (selectedVendor?.email) {
      setEmailAlertMessage(`거래명세서가 '${selectedVendor.email}'으로 발송되었습니다.`);
      setTransactionStatementIssued(true);
      setShowEmailAlert(true);
    }
  }, [selectedVendor]);

  // ===== 금액 포맷 =====
  const formatAmount = (amount: number): string => {
    return amount.toLocaleString();
  };

  return (
    <PageLayout>
      {/* 페이지 헤더 */}
      <PageHeader
        title={isNewMode ? '매출 상세_직접 등록' : '매출 상세'}
        description="매출 상세를 등록하고 관리합니다"
        icon={Receipt}
      />

      {/* 헤더 액션 버튼 */}
      <div className="flex items-center justify-end gap-2 mb-6">
        {/* view 모드: [목록] [삭제] [수정] */}
        {isViewMode ? (
          <>
            <Button variant="outline" onClick={handleBack}>
              목록
            </Button>
            <Button
              variant="outline"
              className="text-red-500 border-red-200 hover:bg-red-50"
              onClick={() => setShowDeleteDialog(true)}
            >
              삭제
            </Button>
            <Button onClick={handleEdit} className="bg-orange-500 hover:bg-orange-600">
              수정
            </Button>
          </>
        ) : (
          /* edit/new 모드: [취소] [저장/등록] */
          <>
            <Button variant="outline" onClick={handleCancel}>
              취소
            </Button>
            <Button onClick={handleSave} className="bg-orange-500 hover:bg-orange-600">
              {isNewMode ? '등록' : '저장'}
            </Button>
          </>
        )}
      </div>

      {/* 기본 정보 섹션 */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="text-lg">기본 정보</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {/* 매출번호 */}
            <div className="space-y-2">
              <Label htmlFor="salesNo">매출번호</Label>
              <Input
                id="salesNo"
                value={salesNo}
                readOnly
                disabled
                className="bg-gray-50"
              />
            </div>

            {/* 매출일 */}
            <div className="space-y-2">
              <Label htmlFor="salesDate">매출일</Label>
              <Input
                id="salesDate"
                type="date"
                value={salesDate}
                onChange={(e) => setSalesDate(e.target.value)}
                disabled={isViewMode}
              />
            </div>

            {/* 거래처명 */}
            <div className="space-y-2">
              <Label htmlFor="vendorId">거래처명</Label>
              <Select value={vendorId} onValueChange={setVendorId} disabled={isViewMode}>
                <SelectTrigger>
                  <SelectValue placeholder="거래처명 ▼" />
                </SelectTrigger>
                <SelectContent>
                  {MOCK_VENDORS.map((vendor) => (
                    <SelectItem key={vendor.id} value={vendor.id}>
                      {vendor.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 매출 유형 */}
            <div className="space-y-2">
              <Label htmlFor="salesType">매출 유형</Label>
              <Select value={salesType} onValueChange={(v) => setSalesType(v as SalesType)} disabled={isViewMode}>
                <SelectTrigger>
                  <SelectValue placeholder="선택 ▼" />
                </SelectTrigger>
                <SelectContent>
                  {SALES_TYPE_OPTIONS.filter(o => o.value !== 'all').map((option) => (
                    <SelectItem key={option.value} value={option.value}>
                      {option.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 품목 정보 섹션 */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="text-lg">품목 정보</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[50px] text-center">#</TableHead>
                  <TableHead>품목명</TableHead>
                  <TableHead className="w-[100px] text-right">수량</TableHead>
                  <TableHead className="w-[120px] text-right">단가</TableHead>
                  <TableHead className="w-[120px] text-right">공급가액</TableHead>
                  <TableHead className="w-[100px] text-right">부가세</TableHead>
                  <TableHead>적요</TableHead>
                  <TableHead className="w-[50px]"></TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {items.map((item, index) => (
                  <TableRow key={item.id}>
                    <TableCell className="text-center">{index + 1}</TableCell>
                    <TableCell>
                      <Input
                        value={item.itemName}
                        onChange={(e) => handleItemChange(index, 'itemName', e.target.value)}
                        placeholder="품목명"
                        disabled={isViewMode}
                      />
                    </TableCell>
                    <TableCell>
                      <Input
                        type="number"
                        value={item.quantity || ''}
                        onChange={(e) => handleItemChange(index, 'quantity', e.target.value)}
                        className="text-right"
                        disabled={isViewMode}
                      />
                    </TableCell>
                    <TableCell>
                      <Input
                        type="number"
                        value={item.unitPrice || ''}
                        onChange={(e) => handleItemChange(index, 'unitPrice', e.target.value)}
                        className="text-right"
                        disabled={isViewMode}
                      />
                    </TableCell>
                    <TableCell className="text-right font-medium">
                      {formatAmount(item.supplyAmount)}
                    </TableCell>
                    <TableCell className="text-right">
                      {formatAmount(item.vat)}
                    </TableCell>
                    <TableCell>
                      <Input
                        value={item.note}
                        onChange={(e) => handleItemChange(index, 'note', e.target.value)}
                        placeholder="적요"
                        disabled={isViewMode}
                      />
                    </TableCell>
                    <TableCell>
                      {!isViewMode && items.length > 1 && (
                        <Button
                          variant="ghost"
                          size="icon"
                          className="h-8 w-8 text-red-600 hover:text-red-700"
                          onClick={() => handleRemoveItem(index)}
                        >
                          <X className="h-4 w-4" />
                        </Button>
                      )}
                    </TableCell>
                  </TableRow>
                ))}
                {/* 합계 행 */}
                <TableRow className="bg-gray-50 font-medium">
                  <TableCell colSpan={4} className="text-right">
                    합계
                  </TableCell>
                  <TableCell className="text-right">
                    {formatAmount(totals.supplyAmount)}
                  </TableCell>
                  <TableCell className="text-right">
                    {formatAmount(totals.vat)}
                  </TableCell>
                  <TableCell colSpan={2}></TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>

          {/* 품목 추가 버튼 */}
          {!isViewMode && (
            <div className="mt-4">
              <Button variant="outline" onClick={handleAddItem}>
                <Plus className="h-4 w-4 mr-2" />
                추가
              </Button>
            </div>
          )}
        </CardContent>
      </Card>

      {/* 세금계산서 섹션 */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="text-lg">세금계산서</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <Label htmlFor="taxInvoice">세금계산서 발행</Label>
              <Switch
                id="taxInvoice"
                checked={taxInvoiceIssued}
                onCheckedChange={setTaxInvoiceIssued}
                disabled={isViewMode}
              />
            </div>
            <div className="flex items-center gap-2">
              {taxInvoiceIssued ? (
                <span className="text-sm text-green-600 flex items-center gap-1">
                  <FileText className="h-4 w-4" />
                  발행완료
                </span>
              ) : (
                <span className="text-sm text-gray-500 flex items-center gap-1">
                  <FileText className="h-4 w-4" />
                  미발행
                </span>
              )}
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 거래명세서 섹션 */}
      <Card className="mb-6">
        <CardHeader>
          <CardTitle className="text-lg">거래명세서</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center justify-between flex-wrap gap-4">
            <div className="flex items-center gap-3">
              <Label htmlFor="transactionStatement">거래명세서 발행</Label>
              <Switch
                id="transactionStatement"
                checked={transactionStatementIssued}
                onCheckedChange={setTransactionStatementIssued}
                disabled={isViewMode}
              />
            </div>
            <div className="flex items-center gap-2">
              <Button
                variant="default"
                className="bg-gray-900 hover:bg-gray-800 text-white"
                onClick={() => {
                  // TODO: 거래명세서 조회 기능 연결
                  console.log('거래명세서 조회:', salesId);
                }}
              >
                <FileText className="h-4 w-4 mr-2" />
                거래명세서 조회
              </Button>
              {vendorId && (
                <Button
                  variant="default"
                  className="bg-gray-900 hover:bg-gray-800 text-white"
                  onClick={handleSendTransactionStatement}
                  disabled={!selectedVendor?.email}
                >
                  <Send className="h-4 w-4 mr-2" />
                  거래명세서 발행하기
                </Button>
              )}
              {transactionStatementIssued ? (
                <span className="text-sm text-green-600 flex items-center gap-1">
                  <FileText className="h-4 w-4" />
                  발행완료
                </span>
              ) : (
                <span className="text-sm text-gray-500 flex items-center gap-1">
                  <FileText className="h-4 w-4" />
                  미발행
                </span>
              )}
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 삭제 확인 다이얼로그 */}
      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>매출 삭제</AlertDialogTitle>
            <AlertDialogDescription>
              이 매출 내역을 삭제하시겠습니까? 이 작업은 취소할 수 없습니다.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>취소</AlertDialogCancel>
            <AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700">
              삭제
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* 이메일 발송 알림 다이얼로그 */}
      <AlertDialog open={showEmailAlert} onOpenChange={setShowEmailAlert}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>발송 완료</AlertDialogTitle>
            <AlertDialogDescription>
              {emailAlertMessage}
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction>확인</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </PageLayout>
  );
}