/**
 * 표준 다이얼로그 사용 예시
 * 
 * 디자인시스템관리 기준으로 만든 표준 다이얼로그들의 사용법을 보여줍니다.
 */

import { useState } from "react";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
import { StandardDialog, ConfirmDialog, FormDialog } from "../molecules/StandardDialog";
import { Plus, Trash2, Edit } from "lucide-react";

export function StandardDialogExample() {
  const [standardOpen, setStandardOpen] = useState(false);
  const [confirmOpen, setConfirmOpen] = useState(false);
  const [formOpen, setFormOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleDelete = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      alert("삭제되었습니다");
    }, 1000);
  };

  const handleSave = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setFormOpen(false);
      alert("저장되었습니다");
    }, 1000);
  };

  return (
    <div className="p-6 space-y-6">
      <div>
        <h1 className="text-2xl font-bold mb-2">표준 다이얼로그 예시</h1>
        <p className="text-muted-foreground">
          디자인시스템관리 기준으로 만든 표준 다이얼로그들입니다.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {/* StandardDialog */}
        <Card>
          <CardHeader>
            <CardTitle>표준 다이얼로그</CardTitle>
            <CardDescription>기본 다이얼로그</CardDescription>
          </CardHeader>
          <CardContent>
            <Button onClick={() => setStandardOpen(true)}>
              <Plus className="w-4 h-4 mr-2" />
              열기
            </Button>

            <StandardDialog
              open={standardOpen}
              onOpenChange={setStandardOpen}
              title="표준 다이얼로그"
              description="이것은 표준 다이얼로그입니다"
              size="md"
              footer={
                <Button onClick={() => setStandardOpen(false)}>
                  닫기
                </Button>
              }
            >
              <div className="space-y-4">
                <p>다이얼로그 내용이 여기에 들어갑니다.</p>
                <p>반응형으로 작동하며, 모바일/태블릿/데스크톱 모두 지원합니다.</p>
              </div>
            </StandardDialog>
          </CardContent>
        </Card>

        {/* ConfirmDialog */}
        <Card>
          <CardHeader>
            <CardTitle>확인 다이얼로그</CardTitle>
            <CardDescription>삭제 확인 등에 사용</CardDescription>
          </CardHeader>
          <CardContent>
            <Button 
              variant="destructive"
              onClick={() => setConfirmOpen(true)}
            >
              <Trash2 className="w-4 h-4 mr-2" />
              삭제
            </Button>

            <ConfirmDialog
              open={confirmOpen}
              onOpenChange={setConfirmOpen}
              title="삭제 확인"
              description="정말로 이 항목을 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
              onConfirm={handleDelete}
              confirmText="삭제"
              cancelText="취소"
              confirmVariant="destructive"
              loading={loading}
            />
          </CardContent>
        </Card>

        {/* FormDialog */}
        <Card>
          <CardHeader>
            <CardTitle>폼 다이얼로그</CardTitle>
            <CardDescription>입력 폼이 있는 다이얼로그</CardDescription>
          </CardHeader>
          <CardContent>
            <Button onClick={() => setFormOpen(true)}>
              <Edit className="w-4 h-4 mr-2" />
              수정
            </Button>

            <FormDialog
              open={formOpen}
              onOpenChange={setFormOpen}
              title="품목 수정"
              description="품목 정보를 수정합니다"
              onSave={handleSave}
              saveText="저장"
              cancelText="취소"
              size="lg"
              loading={loading}
            >
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="itemCode">품목코드</Label>
                  <Input id="itemCode" placeholder="품목코드를 입력하세요" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="itemName">품목명</Label>
                  <Input id="itemName" placeholder="품목명을 입력하세요" />
                </div>
                <div className="space-y-2">
                  <Label htmlFor="spec">규격</Label>
                  <Input id="spec" placeholder="규격을 입력하세요" />
                </div>
              </div>
            </FormDialog>
          </CardContent>
        </Card>
      </div>

      {/* 코드 예시 */}
      <Card>
        <CardHeader>
          <CardTitle>사용 예시 코드</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <h3 className="font-semibold mb-2">1. 표준 다이얼로그</h3>
            <pre className="bg-muted p-4 rounded-lg text-sm overflow-x-auto">
{`<StandardDialog
  open={isOpen}
  onOpenChange={setIsOpen}
  title="제목"
  description="설명"
  size="md"
  footer={
    <Button onClick={() => setIsOpen(false)}>
      닫기
    </Button>
  }
>
  <div>내용</div>
</StandardDialog>`}
            </pre>
          </div>

          <div>
            <h3 className="font-semibold mb-2">2. 확인 다이얼로그</h3>
            <pre className="bg-muted p-4 rounded-lg text-sm overflow-x-auto">
{`<ConfirmDialog
  open={isOpen}
  onOpenChange={setIsOpen}
  title="삭제 확인"
  description="정말로 삭제하시겠습니까?"
  onConfirm={handleDelete}
  confirmText="삭제"
  confirmVariant="destructive"
/>`}
            </pre>
          </div>

          <div>
            <h3 className="font-semibold mb-2">3. 폼 다이얼로그</h3>
            <pre className="bg-muted p-4 rounded-lg text-sm overflow-x-auto">
{`<FormDialog
  open={isOpen}
  onOpenChange={setIsOpen}
  title="품목 등록"
  description="새 품목을 등록합니다"
  onSave={handleSave}
  size="lg"
>
  <Input placeholder="품목명" />
</FormDialog>`}
            </pre>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
