import { useState } from "react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { ArrowLeft, Save, X } from "lucide-react";
import { toast } from "sonner@2.0.3";

interface Product {
  id: string;
  code: string;
  name: string;
  category: string;
  spec: string;
  unit: string;
}

interface ProductsRegistrationProps {
  onBack: () => void;
  onSave: (product: Omit<Product, "id">) => void;
  editingProduct?: Product | null;
}

const categories = ["원자재", "부자재", "반제품", "완제품", "본체", "모터"];
const units = ["㎡", "m", "ea", "set", "kg", "L"];

export function ProductsRegistration({ onBack, onSave, editingProduct }: ProductsRegistrationProps) {
  const [formData, setFormData] = useState({
    code: editingProduct?.code || "",
    name: editingProduct?.name || "",
    category: editingProduct?.category || "",
    spec: editingProduct?.spec || "",
    unit: editingProduct?.unit || ""
  });

  const handleSubmit = () => {
    if (!formData.code || !formData.name || !formData.category || !formData.spec || !formData.unit) {
      toast.error("모든 필드를 입력해주세요.");
      return;
    }

    onSave(formData);
    toast.success(editingProduct ? "품목이 수정되었습니다." : "품목이 등록되었습니다.");
    onBack();
  };

  const handleCancel = () => {
    onBack();
  };

  return (
    <div className="p-3 md:p-6 space-y-4 md:space-y-6 bg-gradient-to-br from-slate-50 to-blue-50/30 min-h-screen">
      {/* 헤더 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Button
            variant="outline"
            size="icon"
            onClick={onBack}
            className="rounded-xl shadow-sm hover:shadow-md transition-all"
          >
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <div>
            <h1 className="text-xl md:text-3xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
              {editingProduct ? "품목 수정" : "품목 신규등록"}
            </h1>
            <p className="text-xs md:text-sm text-muted-foreground mt-1">
              품목 정보를 입력하세요
            </p>
          </div>
        </div>
      </div>

      {/* 등록 폼 */}
      <Card className="border-0 shadow-lg bg-white/80 backdrop-blur">
        <CardHeader className="border-b bg-gradient-to-r from-blue-50 to-indigo-50">
          <CardTitle className="flex items-center gap-3">
            <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-500 rounded-xl flex items-center justify-center shadow-md">
              <Save className="w-5 h-5 text-white" />
            </div>
            기본 정보
          </CardTitle>
        </CardHeader>
        <CardContent className="p-4 md:p-6 space-y-6">
          <div className="grid grid-cols-1 gap-4 md:gap-6">
            {/* 품목코드 */}
            <div className="space-y-2">
              <Label htmlFor="code" className="flex items-center gap-1">
                품목코드
                <span className="text-red-500">*</span>
              </Label>
              <Input
                id="code"
                value={formData.code}
                onChange={(e) => setFormData({ ...formData, code: e.target.value })}
                placeholder="예: EGI-1.15"
                className="h-11 rounded-lg border-gray-200 focus:border-blue-500 focus:ring-blue-500"
              />
              <p className="text-xs text-muted-foreground">
                고유한 품목 코드를 입력하세요
              </p>
            </div>

            {/* 품목명 */}
            <div className="space-y-2">
              <Label htmlFor="name" className="flex items-center gap-1">
                품목명
                <span className="text-red-500">*</span>
              </Label>
              <Input
                id="name"
                value={formData.name}
                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                placeholder="예: 철국판"
                className="h-11 rounded-lg border-gray-200 focus:border-blue-500 focus:ring-blue-500"
              />
              <p className="text-xs text-muted-foreground">
                품목의 정식 명칭을 입력하세요
              </p>
            </div>

            {/* 분류 */}
            <div className="space-y-2">
              <Label htmlFor="category" className="flex items-center gap-1">
                분류
                <span className="text-red-500">*</span>
              </Label>
              <Select value={formData.category} onValueChange={(value) => setFormData({ ...formData, category: value })}>
                <SelectTrigger className="h-11 rounded-lg border-gray-200 focus:border-blue-500 focus:ring-blue-500">
                  <SelectValue placeholder="분류 선택" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map(cat => (
                    <SelectItem key={cat} value={cat}>{cat}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-xs text-muted-foreground">
                품목 분류를 선택하세요
              </p>
            </div>

            {/* 단위 */}
            <div className="space-y-2">
              <Label htmlFor="unit" className="flex items-center gap-1">
                단위
                <span className="text-red-500">*</span>
              </Label>
              <Select value={formData.unit} onValueChange={(value) => setFormData({ ...formData, unit: value })}>
                <SelectTrigger className="h-11 rounded-lg border-gray-200 focus:border-blue-500 focus:ring-blue-500">
                  <SelectValue placeholder="단위 선택" />
                </SelectTrigger>
                <SelectContent>
                  {units.map(unit => (
                    <SelectItem key={unit} value={unit}>{unit}</SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-xs text-muted-foreground">
                측정 단위를 선택하세요
              </p>
            </div>

            {/* 규격요약 - full width */}
            <div className="space-y-2 md:col-span-2">
              <Label htmlFor="spec" className="flex items-center gap-1">
                규격요약
                <span className="text-red-500">*</span>
              </Label>
              <Input
                id="spec"
                value={formData.spec}
                onChange={(e) => setFormData({ ...formData, spec: e.target.value })}
                placeholder="예: EGI-1.55T-1219*3000"
                className="h-11 rounded-lg border-gray-200 focus:border-blue-500 focus:ring-blue-500"
              />
              <p className="text-xs text-muted-foreground">
                품목의 주요 규격 정보를 입력하세요
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 하단 버튼 */}
      <div className="flex flex-col sm:flex-row gap-3 justify-end sticky bottom-0 bg-gradient-to-t from-slate-50 to-transparent pt-4 pb-2">
        <Button
          variant="outline"
          onClick={handleCancel}
          className="w-full sm:w-auto rounded-xl shadow-sm hover:shadow-md transition-all border-gray-300"
        >
          <X className="w-4 h-4 mr-2" />
          취소
        </Button>
        <Button
          onClick={handleSubmit}
          className="w-full sm:w-auto rounded-xl shadow-md hover:shadow-lg transition-all bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700"
        >
          <Save className="w-4 h-4 mr-2" />
          {editingProduct ? "수정" : "등록"}
        </Button>
      </div>
    </div>
  );
}