import { useState } from 'react';
import { Settings, X } from 'lucide-react';
import { useScrollLock } from '@/lib/useScrollLock';
import { Button } from '@/components/ui/button';
import { Typography } from '@/components/ui/typography';
import { Input } from '@/components/ui/input';
import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
import { useLabels } from '@/features/settings/useCompanySettings';
import { type QuotationSetting } from '../types';
import type { SettingInput } from '../hooks/useQuotations';

type QuotationSettingsModalProps = {
  open: boolean;
  settings: QuotationSetting[];
  onAdd: (input: SettingInput) => boolean;
  onDelete: (id: string) => void;
  onClose: () => void;
};

export function QuotationSettingsModal({
  open,
  settings,
  onAdd,
  onDelete,
  onClose,
}: QuotationSettingsModalProps) {
  useScrollLock(open); // 모달 열린 동안 배경(부모) 스크롤 잠금
  const label = useLabels(); // 회사 설정 용어(목표 마진 등)
  const [targetMargin, setTargetMargin] = useState('');
  const [cardUseCount, setCardUseCount] = useState('');

  if (!open) return null;

  // 세팅은 목표 마진율·카드 사용 횟수만. 낙찰 정책은 견적 생성으로 이관, 앵커링은 칸 rate(v1.2)로 대체.
  const handleAdd = (e: React.FormEvent) => {
    e.preventDefault();
    const ok = onAdd({ targetMargin, cardUseCount });
    if (ok) {
      setTargetMargin('');
      setCardUseCount('');
    }
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-xs">
      <div className="w-full max-w-2xl bg-card border border-border rounded-lg shadow-2xl p-6 max-h-[90vh] overflow-y-auto animate-scale-up font-mono text-xs">

        <div className="flex items-center justify-between pb-4 border-b border-border mb-4">
          <div className="flex items-center gap-2">
            <Settings className="text-muted-foreground" size={16} />
            <Typography variant="h3">견적 세팅 등록 및 관리</Typography>
          </div>
          <button onClick={onClose} className="p-1 rounded text-muted-foreground hover:bg-muted cursor-pointer">
            <X size={18} />
          </button>
        </div>

        <div className="space-y-6">
          {/* Current settings */}
          <div>
            <span className="font-bold text-foreground block mb-2 text-xs">등록된 견적 세팅 목록</span>
            <div className="border border-border rounded overflow-hidden max-h-40 overflow-y-auto">
              <Table className="w-full text-left font-mono text-[11px] divide-y divide-border">
                <TableHeader className="bg-muted text-muted-foreground">
                  <TableRow>
                    <TableHead className="p-2">{label('target_margin')}</TableHead>
                    <TableHead className="p-2">카드 사용 횟수</TableHead>
                    <TableHead className="p-2 text-center w-12">삭제</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody className="divide-y divide-border bg-background">
                  {settings.length === 0 && (
                    <TableRow>
                      <TableCell colSpan={3} className="p-6 text-center text-muted-foreground">
                        등록된 견적 세팅이 없습니다. (리스트가 비어 있습니다)
                      </TableCell>
                    </TableRow>
                  )}
                  {settings.map((qs) => (
                    <TableRow key={qs.qt_setting_id} className="hover:bg-muted/30">
                      <TableCell className="p-2 font-bold text-primary">{qs.target_margin}</TableCell>
                      <TableCell className="p-2 text-muted-foreground">{qs.card_use_count}</TableCell>
                      <TableCell className="p-2 text-center">
                        <button
                          type="button"
                          onClick={() => onDelete(qs.qt_setting_id)}
                          className="text-red-500 hover:text-red-700 font-bold px-1.5 py-0.5 rounded hover:bg-red-50"
                        >
                          삭제
                        </button>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>

          {/* Add form */}
          <form onSubmit={handleAdd} className="space-y-3 pt-4 border-t border-border/60">
            <span className="font-bold text-foreground block text-xs">신규 견적 세팅 추가</span>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
              <div className="space-y-1">
                <Typography as="label" variant="muted" className="text-[10px] font-semibold">{label('target_margin')} (%)</Typography>
                <Input type="number" step="0.1" value={targetMargin} onChange={(e) => setTargetMargin(e.target.value)} placeholder="예: 12" />
              </div>
              <div className="space-y-1">
                <Typography as="label" variant="muted" className="text-[10px] font-semibold">카드 사용 횟수</Typography>
                <Input type="number" step="1" value={cardUseCount} onChange={(e) => setCardUseCount(e.target.value)} placeholder="예: 3" />
              </div>
            </div>

            <div className="flex justify-end pt-2">
              <Button type="submit" size="sm">새 세팅 추가</Button>
            </div>
          </form>
        </div>

        {/* Footer */}
        <div className="pt-4 border-t border-border mt-6 flex justify-end">
          <Button type="button" variant="outline" size="sm" onClick={onClose}>닫기</Button>
        </div>

      </div>
    </div>
  );
}