// @ts-nocheck - Legacy file, not in use
'use client';

import { useState, useEffect } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Landmark, Save, Trash2, X, Edit, ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
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 { toast } from 'sonner';
import type { Account, AccountFormData, AccountStatus } from '../types';
import {
  BANK_OPTIONS,
  BANK_LABELS,
  ACCOUNT_STATUS_OPTIONS,
  ACCOUNT_STATUS_LABELS,
  ACCOUNT_STATUS_COLORS,
} from '../types';
import { createBankAccount, updateBankAccount, deleteBankAccount } from '../actions';

interface AccountDetailProps {
  account?: Account;
  mode: 'create' | 'view' | 'edit';
}

export function AccountDetail({ account, mode: initialMode }: AccountDetailProps) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [mode, setMode] = useState(initialMode);
  const [showDeleteDialog, setShowDeleteDialog] = useState(false);

  // URL에서 mode 파라미터 확인
  useEffect(() => {
    const urlMode = searchParams.get('mode');
    if (urlMode === 'edit' && account) {
      setMode('edit');
    }
  }, [searchParams, account]);

  // 폼 상태
  const [formData, setFormData] = useState<AccountFormData>({
    bankCode: account?.bankCode || '',
    bankName: account?.bankName || '',
    accountNumber: account?.accountNumber || '',
    accountName: account?.accountName || '',
    accountHolder: account?.accountHolder || '',
    accountPassword: '',
    status: account?.status || 'active',
  });

  const isViewMode = mode === 'view';
  const isCreateMode = mode === 'create';
  const isEditMode = mode === 'edit';

  const handleChange = (field: keyof AccountFormData, value: string) => {
    setFormData((prev: AccountFormData) => ({ ...prev, [field]: value }));
  };

  const handleBack = () => {
    router.push('/ko/settings/accounts');
  };

  const handleSubmit = async () => {
    const dataToSend = {
      ...formData,
      bankName: BANK_LABELS[formData.bankCode] || formData.bankCode,
    };

    if (isCreateMode) {
      const result = await createBankAccount(dataToSend);
      if (result.success) {
        toast.success('계좌가 등록되었습니다.');
        router.push('/ko/settings/accounts');
      } else {
        toast.error(result.error || '계좌 등록에 실패했습니다.');
      }
    } else {
      if (!account?.id) return;
      const result = await updateBankAccount(account.id, dataToSend);
      if (result.success) {
        toast.success('계좌가 수정되었습니다.');
        router.push('/ko/settings/accounts');
      } else {
        toast.error(result.error || '계좌 수정에 실패했습니다.');
      }
    }
  };

  const handleDelete = () => {
    setShowDeleteDialog(true);
  };

  const handleConfirmDelete = async () => {
    if (!account?.id) return;
    const result = await deleteBankAccount(account.id);
    if (result.success) {
      toast.success('계좌가 삭제되었습니다.');
      router.push('/ko/settings/accounts');
    } else {
      toast.error(result.error || '계좌 삭제에 실패했습니다.');
    }
  };

  const handleCancel = () => {
    if (isCreateMode) {
      router.push('/ko/settings/accounts');
    } else {
      setMode('view');
      // 원래 데이터로 복원
      if (account) {
        setFormData({
          bankCode: account.bankCode, bankName: account.bankName,
          accountNumber: account.accountNumber,
          accountName: account.accountName,
          accountHolder: account.accountHolder,
          accountPassword: '',
          status: account.status,
        });
      }
    }
  };

  const handleEdit = () => {
    setMode('edit');
  };

  // 뷰 모드 렌더링
  if (isViewMode) {
    return (
      <PageLayout>
        <PageHeader
          title="계좌 상세"
          description="계좌 정보를 관리합니다"
          icon={Landmark}
        />

        <div className="space-y-6">
          {/* 기본 정보 */}
          <Card>
            <CardHeader className="flex flex-row items-center justify-between">
              <CardTitle className="text-base">기본 정보</CardTitle>
              <Badge className={ACCOUNT_STATUS_COLORS[formData.status]}>
                {ACCOUNT_STATUS_LABELS[formData.status]}
              </Badge>
            </CardHeader>
            <CardContent>
              <dl className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">은행</dt>
                  <dd className="text-sm mt-1">{BANK_LABELS[formData.bankCode] || '-'}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">계좌번호</dt>
                  <dd className="text-sm mt-1 font-mono">{formData.accountNumber || '-'}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">예금주</dt>
                  <dd className="text-sm mt-1">{formData.accountHolder || '-'}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">계좌 비밀번호</dt>
                  <dd className="text-sm mt-1">****</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">계좌명</dt>
                  <dd className="text-sm mt-1">{formData.accountName || '-'}</dd>
                </div>
                <div>
                  <dt className="text-sm font-medium text-muted-foreground">상태</dt>
                  <dd className="text-sm mt-1">
                    <Badge className={ACCOUNT_STATUS_COLORS[formData.status]}>
                      {ACCOUNT_STATUS_LABELS[formData.status]}
                    </Badge>
                  </dd>
                </div>
              </dl>
            </CardContent>
          </Card>

          {/* 버튼 영역 */}
          <div className="flex items-center justify-between">
            <Button variant="outline" onClick={handleBack}>
              <ArrowLeft className="w-4 h-4 mr-2" />
              목록으로
            </Button>
            <div className="flex items-center gap-2">
              <Button variant="outline" onClick={handleDelete} className="text-destructive hover:bg-destructive hover:text-destructive-foreground">
                <Trash2 className="w-4 h-4 mr-2" />
                삭제
              </Button>
              <Button onClick={handleEdit}>
                <Edit className="w-4 h-4 mr-2" />
                수정
              </Button>
            </div>
          </div>
        </div>

        {/* 삭제 확인 다이얼로그 */}
        <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
          <AlertDialogContent>
            <AlertDialogHeader>
              <AlertDialogTitle>계좌 삭제</AlertDialogTitle>
              <AlertDialogDescription>
                계좌를 정말 삭제하시겠습니까?
                <br />
                <span className="text-muted-foreground text-sm">
                  삭제된 계좌의 과거 사용 내역은 보존됩니다.
                </span>
              </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
              <AlertDialogCancel>취소</AlertDialogCancel>
              <AlertDialogAction
                onClick={handleConfirmDelete}
                className="bg-red-600 hover:bg-red-700"
              >
                삭제
              </AlertDialogAction>
            </AlertDialogFooter>
          </AlertDialogContent>
        </AlertDialog>
      </PageLayout>
    );
  }

  // 생성/수정 모드 렌더링
  return (
    <PageLayout>
      <PageHeader
        title={isCreateMode ? '계좌 등록' : '계좌 수정'}
        description="계좌 정보를 관리합니다"
        icon={Landmark}
      />

      <div className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle className="text-base">기본 정보</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            {/* 은행 & 계좌번호 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="bankCode">은행</Label>
                <Select
                  value={formData.bankCode}
                  onValueChange={(value) => handleChange('bankCode', value)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="은행 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    {BANK_OPTIONS.map((option) => (
                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="accountNumber">계좌번호</Label>
                <Input
                  id="accountNumber"
                  value={formData.accountNumber}
                  onChange={(e) => handleChange('accountNumber', e.target.value)}
                  placeholder="1234-1234-1234-1234"
                  disabled={isEditMode} // 수정 시 계좌번호는 변경 불가
                />
              </div>
            </div>

            {/* 예금주 & 계좌 비밀번호 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="accountHolder">예금주</Label>
                <Input
                  id="accountHolder"
                  value={formData.accountHolder}
                  onChange={(e) => handleChange('accountHolder', e.target.value)}
                  placeholder="예금주명"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="accountPassword">
                  계좌 비밀번호 (빠른 조회 서비스)
                </Label>
                <Input
                  id="accountPassword"
                  type="password"
                  value={formData.accountPassword}
                  onChange={(e) => handleChange('accountPassword', e.target.value)}
                  placeholder="****"
                />
              </div>
            </div>

            {/* 계좌명 & 상태 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div className="space-y-2">
                <Label htmlFor="accountName">계좌명</Label>
                <Input
                  id="accountName"
                  value={formData.accountName}
                  onChange={(e) => handleChange('accountName', e.target.value)}
                  placeholder="계좌명을 입력해주세요"
                />
              </div>

              <div className="space-y-2">
                <Label htmlFor="status">상태</Label>
                <Select
                  value={formData.status}
                  onValueChange={(value) => handleChange('status', value as AccountStatus)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="상태 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    {ACCOUNT_STATUS_OPTIONS.map((option) => (
                      <SelectItem key={option.value} value={option.value}>
                        {option.label}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 버튼 영역 */}
        <div className="flex items-center justify-between">
          <Button variant="outline" onClick={handleCancel}>
            <X className="w-4 h-4 mr-2" />
            취소
          </Button>
          <Button onClick={handleSubmit}>
            <Save className="w-4 h-4 mr-2" />
            {isCreateMode ? '등록' : '저장'}
          </Button>
        </div>
      </div>
    </PageLayout>
  );
}