'use client';

import { useState, useEffect } from 'react';
import { useDaumPostcode } from '@/hooks/useDaumPostcode';
import { useRouter } from 'next/navigation';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Users, Plus, Trash2, ArrowLeft, Save, Settings, Camera } from 'lucide-react';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { FieldSettingsDialog } from './FieldSettingsDialog';
import type {
  Employee,
  EmployeeFormData,
  DepartmentPosition,
  FieldSettings,
} from './types';
import {
  EMPLOYMENT_TYPE_LABELS,
  GENDER_LABELS,
  USER_ROLE_LABELS,
  USER_ACCOUNT_STATUS_LABELS,
  EMPLOYEE_STATUS_LABELS,
  DEFAULT_FIELD_SETTINGS,
} from './types';

interface EmployeeFormProps {
  mode: 'create' | 'edit';
  employee?: Employee;
  onSave: (data: EmployeeFormData) => void;
  fieldSettings?: FieldSettings;
}

const initialFormData: EmployeeFormData = {
  name: '',
  residentNumber: '',
  phone: '',
  email: '',
  salary: '',
  bankAccount: { bankName: '', accountNumber: '', accountHolder: '' },
  profileImage: '',
  employeeCode: '',
  gender: '',
  address: { zipCode: '', address1: '', address2: '' },
  hireDate: '',
  employmentType: '',
  rank: '',
  status: 'active',
  departmentPositions: [],
  clockInLocation: '',
  clockOutLocation: '',
  resignationDate: '',
  resignationReason: '',
  hasUserAccount: false,
  userId: '',
  password: '',
  confirmPassword: '',
  role: 'user',
  accountStatus: 'active',
};

export function EmployeeForm({
  mode,
  employee,
  onSave,
  fieldSettings: initialFieldSettings = DEFAULT_FIELD_SETTINGS,
}: EmployeeFormProps) {
  const router = useRouter();
  const [formData, setFormData] = useState<EmployeeFormData>(initialFormData);

  // Daum 우편번호 서비스
  const { openPostcode } = useDaumPostcode({
    onComplete: (result) => {
      setFormData(prev => ({
        ...prev,
        address: {
          ...prev.address,
          zipCode: result.zonecode,
          address1: result.address,
        },
      }));
    },
  });

  // 항목 설정 상태
  const [showFieldSettings, setShowFieldSettings] = useState(false);
  const [fieldSettings, setFieldSettings] = useState<FieldSettings>(initialFieldSettings);

  const title = mode === 'create' ? '사원 등록' : '사원 수정';

  // localStorage에서 항목 설정 로드
  useEffect(() => {
    const saved = localStorage.getItem('employeeFieldSettings');
    if (saved) {
      try {
        setFieldSettings(JSON.parse(saved));
      } catch {
        // ignore parse error
      }
    }
  }, []);

  // 항목 설정 저장
  const handleSaveFieldSettings = (newSettings: FieldSettings) => {
    setFieldSettings(newSettings);
    localStorage.setItem('employeeFieldSettings', JSON.stringify(newSettings));
  };

  // 데이터 초기화
  useEffect(() => {
    if (employee && mode === 'edit') {
      setFormData({
        name: employee.name,
        residentNumber: employee.residentNumber || '',
        phone: employee.phone || '',
        email: employee.email || '',
        salary: employee.salary?.toString() || '',
        bankAccount: employee.bankAccount || { bankName: '', accountNumber: '', accountHolder: '' },
        profileImage: employee.profileImage || '',
        employeeCode: employee.employeeCode || '',
        gender: employee.gender || '',
        address: employee.address || { zipCode: '', address1: '', address2: '' },
        hireDate: employee.hireDate || '',
        employmentType: employee.employmentType || '',
        rank: employee.rank || '',
        status: employee.status,
        departmentPositions: employee.departmentPositions || [],
        clockInLocation: employee.clockInLocation || '',
        clockOutLocation: employee.clockOutLocation || '',
        resignationDate: employee.resignationDate || '',
        resignationReason: employee.resignationReason || '',
        hasUserAccount: !!employee.userInfo,
        userId: employee.userInfo?.userId || '',
        password: '',
        confirmPassword: '',
        role: employee.userInfo?.role || 'user',
        accountStatus: employee.userInfo?.accountStatus || 'active',
      });
    }
  }, [employee, mode]);

  // 입력 변경 핸들러
  const handleChange = (field: keyof EmployeeFormData, value: unknown) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  // 부서/직책 추가
  const handleAddDepartmentPosition = () => {
    const newDP: DepartmentPosition = {
      id: String(Date.now()),
      departmentId: '',
      departmentName: '',
      positionId: '',
      positionName: '',
    };
    setFormData(prev => ({
      ...prev,
      departmentPositions: [...prev.departmentPositions, newDP],
    }));
  };

  // 부서/직책 삭제
  const handleRemoveDepartmentPosition = (id: string) => {
    setFormData(prev => ({
      ...prev,
      departmentPositions: prev.departmentPositions.filter(dp => dp.id !== id),
    }));
  };

  // 부서/직책 변경
  const handleDepartmentPositionChange = (id: string, field: keyof DepartmentPosition, value: string) => {
    setFormData(prev => ({
      ...prev,
      departmentPositions: prev.departmentPositions.map(dp =>
        dp.id === id ? { ...dp, [field]: value } : dp
      ),
    }));
  };

  // 저장
  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave(formData);
  };

  // 취소
  const handleCancel = () => {
    router.back();
  };

  return (
    <PageLayout>
      {/* 헤더 + 버튼 영역 */}
      <div className="flex items-start justify-between mb-6">
        <PageHeader
          title={title}
          description={mode === 'create' ? '새로운 사원 정보를 입력합니다' : '사원 정보를 수정합니다'}
          icon={Users}
        />
        <Button
          type="button"
          variant="outline"
          onClick={() => setShowFieldSettings(true)}
        >
          <Settings className="w-4 h-4 mr-2" />
          항목 설정
        </Button>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        {/* 사원 정보 - 프로필 사진 + 기본 정보 */}
        <Card>
          <CardHeader className="bg-black text-white rounded-t-lg">
            <CardTitle className="text-base font-medium">사원 정보</CardTitle>
          </CardHeader>
          <CardContent className="pt-6">
            {/* 기본 정보 필드들 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-2">
                  <Label htmlFor="name">이름 *</Label>
                  <Input
                    id="name"
                    value={formData.name}
                    onChange={(e) => handleChange('name', e.target.value)}
                    placeholder="이름을 입력하세요"
                    required
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="residentNumber">주민등록번호</Label>
                  <Input
                    id="residentNumber"
                    value={formData.residentNumber}
                    onChange={(e) => handleChange('residentNumber', e.target.value)}
                    placeholder="000000-0000000"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="phone">휴대폰</Label>
                  <Input
                    id="phone"
                    value={formData.phone}
                    onChange={(e) => handleChange('phone', e.target.value)}
                    placeholder="010-0000-0000"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="email">이메일</Label>
                  <Input
                    id="email"
                    type="email"
                    value={formData.email}
                    onChange={(e) => handleChange('email', e.target.value)}
                    placeholder="email@company.com"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="salary">연봉</Label>
                  <Input
                    id="salary"
                    type="number"
                    value={formData.salary}
                    onChange={(e) => handleChange('salary', e.target.value)}
                    placeholder="연봉 (원)"
                  />
                </div>
            </div>

            {/* 급여 계좌 */}
            <div className="space-y-2 mt-6">
              <Label>급여계좌</Label>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
                <Input
                  value={formData.bankAccount.bankName}
                  onChange={(e) => handleChange('bankAccount', { ...formData.bankAccount, bankName: e.target.value })}
                  placeholder="은행명"
                />
                <Input
                  value={formData.bankAccount.accountNumber}
                  onChange={(e) => handleChange('bankAccount', { ...formData.bankAccount, accountNumber: e.target.value })}
                  placeholder="계좌번호"
                />
                <Input
                  value={formData.bankAccount.accountHolder}
                  onChange={(e) => handleChange('bankAccount', { ...formData.bankAccount, accountHolder: e.target.value })}
                  placeholder="예금주"
                />
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 사원 상세 */}
        {(fieldSettings.showProfileImage || fieldSettings.showEmployeeCode || fieldSettings.showGender || fieldSettings.showAddress) && (
          <Card>
            <CardHeader className="bg-black text-white rounded-t-lg">
              <CardTitle className="text-base font-medium">사원 상세</CardTitle>
            </CardHeader>
            <CardContent className="pt-6 space-y-4">
              {/* 프로필 사진 + 사원코드/성별 */}
              <div className="flex gap-6">
                {/* 프로필 사진 영역 */}
                {fieldSettings.showProfileImage && (
                  <div className="space-y-2 flex-shrink-0">
                    <Label>프로필 사진</Label>
                    <div className="w-32 h-32 border border-dashed border-gray-300 rounded-md flex flex-col items-center justify-center bg-gray-50 relative cursor-pointer hover:bg-gray-100">
                      <span className="text-sm text-gray-400 mb-1">IMG</span>
                      <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
                        <Camera className="w-4 h-4 text-gray-500" />
                      </div>
                      <input
                        type="file"
                        accept="image/png,image/jpeg,image/gif"
                        className="absolute inset-0 opacity-0 cursor-pointer"
                        onChange={(e) => {
                          const file = e.target.files?.[0];
                          if (file) {
                            // TODO: 파일 업로드 처리
                            handleChange('profileImage', URL.createObjectURL(file));
                          }
                        }}
                      />
                    </div>
                    <p className="text-xs text-gray-500">
                      1 250 X 250px, 10MB 이하의<br />PNG, JPEG, GIF
                    </p>
                  </div>
                )}

                {/* 사원코드, 성별 */}
                <div className="flex-1 space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {fieldSettings.showEmployeeCode && (
                      <div className="space-y-2">
                        <Label htmlFor="employeeCode">사원코드</Label>
                        <Input
                          id="employeeCode"
                          value={formData.employeeCode}
                          onChange={(e) => handleChange('employeeCode', e.target.value)}
                          placeholder="사원코드를 입력해주세요"
                        />
                      </div>
                    )}

                    {fieldSettings.showGender && (
                      <div className="space-y-2">
                        <Label>성별</Label>
                        <RadioGroup
                          value={formData.gender}
                          onValueChange={(value) => handleChange('gender', value)}
                          className="flex items-center gap-4 h-10"
                        >
                          <div className="flex items-center space-x-2">
                            <RadioGroupItem value="male" id="gender-male" />
                            <Label htmlFor="gender-male" className="font-normal cursor-pointer">남성</Label>
                          </div>
                          <div className="flex items-center space-x-2">
                            <RadioGroupItem value="female" id="gender-female" />
                            <Label htmlFor="gender-female" className="font-normal cursor-pointer">여성</Label>
                          </div>
                        </RadioGroup>
                      </div>
                    )}
                  </div>

                  {/* 주소 (사원코드/성별 아래) */}
                  {fieldSettings.showAddress && (
                    <div className="space-y-2">
                      <Label>주소</Label>
                      <div className="flex gap-2">
                        <Button type="button" variant="default" size="sm" onClick={openPostcode} className="bg-blue-500 hover:bg-blue-600">
                          우편번호 찾기
                        </Button>
                        <Input
                          value={formData.address.zipCode}
                          onChange={(e) => handleChange('address', { ...formData.address, zipCode: e.target.value })}
                          placeholder=""
                          className="w-24"
                          readOnly
                        />
                        <Input
                          value={formData.address.address2}
                          onChange={(e) => handleChange('address', { ...formData.address, address2: e.target.value })}
                          placeholder="상세주소를 입력해주세요"
                          className="flex-1"
                        />
                      </div>
                    </div>
                  )}
                </div>
              </div>
            </CardContent>
          </Card>
        )}

        {/* 인사 정보 */}
        {(fieldSettings.showHireDate || fieldSettings.showEmploymentType || fieldSettings.showRank || fieldSettings.showStatus || fieldSettings.showDepartment || fieldSettings.showPosition || fieldSettings.showClockInLocation || fieldSettings.showClockOutLocation || fieldSettings.showResignationDate || fieldSettings.showResignationReason) && (
        <Card>
          <CardHeader className="bg-black text-white rounded-t-lg">
            <CardTitle className="text-base font-medium">인사 정보</CardTitle>
          </CardHeader>
          <CardContent className="pt-6 space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {fieldSettings.showHireDate && (
                <div className="space-y-2">
                  <Label htmlFor="hireDate">입사일</Label>
                  <Input
                    id="hireDate"
                    type="date"
                    value={formData.hireDate}
                    onChange={(e) => handleChange('hireDate', e.target.value)}
                  />
                </div>
              )}

              {fieldSettings.showEmploymentType && (
                <div className="space-y-2">
                  <Label htmlFor="employmentType">고용형태</Label>
                  <Select
                    value={formData.employmentType}
                    onValueChange={(value) => handleChange('employmentType', value)}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="고용형태 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      {Object.entries(EMPLOYMENT_TYPE_LABELS).map(([value, label]) => (
                        <SelectItem key={value} value={value}>{label}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}

              {fieldSettings.showRank && (
                <div className="space-y-2">
                  <Label htmlFor="rank">직급</Label>
                  <Input
                    id="rank"
                    value={formData.rank}
                    onChange={(e) => handleChange('rank', e.target.value)}
                    placeholder="직급 입력"
                  />
                </div>
              )}

              {fieldSettings.showStatus && (
                <div className="space-y-2">
                  <Label htmlFor="status">상태</Label>
                  <Select
                    value={formData.status}
                    onValueChange={(value) => handleChange('status', value)}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="상태 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      {Object.entries(EMPLOYEE_STATUS_LABELS).map(([value, label]) => (
                        <SelectItem key={value} value={value}>{label}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </div>
              )}
            </div>

            {/* 부서/직책 */}
            {(fieldSettings.showDepartment || fieldSettings.showPosition) && (
              <div className="space-y-2">
                <div className="flex items-center justify-between">
                  <Label>부서/직책</Label>
                  <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    onClick={handleAddDepartmentPosition}
                  >
                    <Plus className="w-4 h-4 mr-1" />
                    추가
                  </Button>
                </div>

                {formData.departmentPositions.length === 0 ? (
                  <p className="text-sm text-muted-foreground py-4 text-center border rounded-md">
                    부서/직책을 추가해주세요
                  </p>
                ) : (
                  <div className="space-y-2">
                    {formData.departmentPositions.map((dp) => (
                      <div key={dp.id} className="flex items-center gap-2">
                        <Input
                          value={dp.departmentName}
                          onChange={(e) => handleDepartmentPositionChange(dp.id, 'departmentName', e.target.value)}
                          placeholder="부서명"
                          className="flex-1"
                        />
                        <Input
                          value={dp.positionName}
                          onChange={(e) => handleDepartmentPositionChange(dp.id, 'positionName', e.target.value)}
                          placeholder="직책"
                          className="flex-1"
                        />
                        <Button
                          type="button"
                          variant="ghost"
                          size="sm"
                          onClick={() => handleRemoveDepartmentPosition(dp.id)}
                        >
                          <Trash2 className="w-4 h-4 text-destructive" />
                        </Button>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}

            {/* 출근/퇴근 위치 */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {fieldSettings.showClockInLocation && (
                <div className="space-y-2">
                  <Label htmlFor="clockInLocation">출근 위치</Label>
                  <Select
                    value={formData.clockInLocation}
                    onValueChange={(value) => handleChange('clockInLocation', value)}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="출근 위치 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="headquarters">본사</SelectItem>
                      <SelectItem value="branch1">지사1</SelectItem>
                      <SelectItem value="branch2">지사2</SelectItem>
                      <SelectItem value="remote">재택</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              )}

              {fieldSettings.showClockOutLocation && (
                <div className="space-y-2">
                  <Label htmlFor="clockOutLocation">퇴근 위치</Label>
                  <Select
                    value={formData.clockOutLocation}
                    onValueChange={(value) => handleChange('clockOutLocation', value)}
                  >
                    <SelectTrigger>
                      <SelectValue placeholder="퇴근 위치 선택" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="headquarters">본사</SelectItem>
                      <SelectItem value="branch1">지사1</SelectItem>
                      <SelectItem value="branch2">지사2</SelectItem>
                      <SelectItem value="remote">재택</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              )}
            </div>

            {/* 퇴사일/퇴직사유 */}
            {(fieldSettings.showResignationDate || fieldSettings.showResignationReason) && (
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {fieldSettings.showResignationDate && (
                  <div className="space-y-2">
                    <Label htmlFor="resignationDate">퇴사일</Label>
                    <Input
                      id="resignationDate"
                      type="date"
                      value={formData.resignationDate}
                      onChange={(e) => handleChange('resignationDate', e.target.value)}
                    />
                  </div>
                )}

                {fieldSettings.showResignationReason && (
                  <div className="space-y-2">
                    <Label htmlFor="resignationReason">퇴직사유</Label>
                    <Input
                      id="resignationReason"
                      value={formData.resignationReason}
                      onChange={(e) => handleChange('resignationReason', e.target.value)}
                      placeholder="퇴직 사유를 입력하세요"
                    />
                  </div>
                )}
              </div>
            )}

          </CardContent>
        </Card>
        )}

        {/* 사용자 정보 */}
        <Card>
          <CardHeader className="bg-black text-white rounded-t-lg">
            <CardTitle className="text-base font-medium">사용자 정보</CardTitle>
          </CardHeader>
          <CardContent className="pt-6">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="userId">아이디 *</Label>
                <Input
                  id="userId"
                  value={formData.userId}
                  onChange={(e) => handleChange('userId', e.target.value)}
                  placeholder="사용자 아이디"
                />
              </div>

              {mode === 'create' && (
                <>
                  <div className="space-y-2">
                    <Label htmlFor="password">비밀번호 *</Label>
                    <Input
                      id="password"
                      type="password"
                      value={formData.password}
                      onChange={(e) => handleChange('password', e.target.value)}
                      placeholder="비밀번호"
                    />
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor="confirmPassword">비밀번호 확인</Label>
                    <Input
                      id="confirmPassword"
                      type="password"
                      value={formData.confirmPassword}
                      onChange={(e) => handleChange('confirmPassword', e.target.value)}
                      placeholder="비밀번호 확인"
                    />
                  </div>
                </>
              )}

              <div className="space-y-2">
                <Label htmlFor="role">권한</Label>
                <Select
                  value={formData.role}
                  onValueChange={(value) => handleChange('role', value)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="권한 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    {Object.entries(USER_ROLE_LABELS).map(([value, label]) => (
                      <SelectItem key={value} value={value}>{label}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="space-y-2">
                <Label htmlFor="accountStatus">계정상태</Label>
                <Select
                  value={formData.accountStatus}
                  onValueChange={(value) => handleChange('accountStatus', value)}
                >
                  <SelectTrigger>
                    <SelectValue placeholder="상태 선택" />
                  </SelectTrigger>
                  <SelectContent>
                    {Object.entries(USER_ACCOUNT_STATUS_LABELS).map(([value, label]) => (
                      <SelectItem key={value} value={value}>{label}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 버튼 영역 */}
        <div className="flex items-center justify-between">
          <Button type="button" variant="outline" onClick={handleCancel}>
            <ArrowLeft className="w-4 h-4 mr-2" />
            취소
          </Button>
          <Button type="submit">
            <Save className="w-4 h-4 mr-2" />
            {mode === 'create' ? '등록' : '저장'}
          </Button>
        </div>
      </form>

      {/* 항목 설정 모달 */}
      <FieldSettingsDialog
        open={showFieldSettings}
        onOpenChange={setShowFieldSettings}
        settings={fieldSettings}
        onSave={handleSaveFieldSettings}
      />
    </PageLayout>
  );
}