/**
 * 수식 도움말 컴포넌트
 * 사용 가능한 엑셀 함수와 예시를 표시합니다
 */

import { Info, Copy, CheckCircle2 } from "lucide-react";
import { Card } from "../ui/card";
import { Button } from "../ui/button";
import { Badge } from "../ui/badge";
import { SUPPORTED_FUNCTIONS } from "../utils/formulaEvaluator";
import { toast } from "sonner@2.0.3";
import { useState } from "react";

interface FormulaHelperProps {
  onInsertFunction?: (functionName: string) => void;
}

export function FormulaHelper({ onInsertFunction }: FormulaHelperProps) {
  const [copiedFunction, setCopiedFunction] = useState<string | null>(null);

  const handleCopy = (syntax: string, functionName: string) => {
    navigator.clipboard.writeText(syntax);
    setCopiedFunction(functionName);
    toast.success(`${functionName} 함수가 클립보드에 복사되었습니다`);
    setTimeout(() => setCopiedFunction(null), 2000);
  };

  return (
    <Card className="p-4 bg-blue-50 border-blue-200">
      <div className="space-y-4">
        {/* 헤더 */}
        <div className="flex items-start gap-2">
          <Info className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
          <div className="flex-1">
            <h4 className="font-semibold text-blue-900">엑셀 함수 사용 가능</h4>
            <p className="text-sm text-blue-700 mt-1">
              기본 산술 연산(+, -, *, /)과 함께 아래 함수들을 사용할 수 있습니다.
            </p>
          </div>
        </div>

        {/* 함수 목록 */}
        <div className="space-y-3 max-h-[400px] overflow-y-auto">
          {SUPPORTED_FUNCTIONS.map((func) => (
            <div
              key={func.name}
              className="bg-white rounded-lg p-3 border border-blue-100 hover:border-blue-300 transition-colors"
            >
              <div className="flex items-start justify-between gap-2 mb-2">
                <div className="flex items-center gap-2">
                  <Badge variant="default" className="bg-blue-600">
                    {func.name}
                  </Badge>
                  <span className="text-sm text-muted-foreground">
                    {func.description}
                  </span>
                </div>
                <div className="flex gap-1">
                  {onInsertFunction && (
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => onInsertFunction(func.syntax)}
                      className="h-7 px-2"
                    >
                      삽입
                    </Button>
                  )}
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => handleCopy(func.syntax, func.name)}
                    className="h-7 px-2"
                  >
                    {copiedFunction === func.name ? (
                      <CheckCircle2 className="w-4 h-4 text-green-600" />
                    ) : (
                      <Copy className="w-4 h-4" />
                    )}
                  </Button>
                </div>
              </div>
              <div className="space-y-1 ml-1">
                <div className="text-sm">
                  <span className="text-muted-foreground">문법:</span>{" "}
                  <code className="bg-gray-100 px-2 py-0.5 rounded text-xs font-mono">
                    {func.syntax}
                  </code>
                </div>
                <div className="text-sm">
                  <span className="text-muted-foreground">예시:</span>{" "}
                  <code className="bg-gray-100 px-2 py-0.5 rounded text-xs font-mono">
                    {func.example}
                  </code>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* 추가 안내 */}
        <div className="pt-3 border-t border-blue-200 text-xs text-blue-700 space-y-1">
          <p>• 변수는 대소문자를 구분합니다 (예: W0, H0, W1_스크린)</p>
          <p>• 함수 이름은 대소문자를 구분하지 않습니다 (SUM = sum)</p>
          <p>• 여러 함수를 중첩하여 사용할 수 있습니다 (예: ROUND(SUM(W0, 100), 2))</p>
          <p>• 기본 연산자도 사용 가능합니다: +, -, *, /, (), %, &gt;, &lt;, =</p>
        </div>
      </div>
    </Card>
  );
}