import { useState } from "react";
import StatusLegend from "./StatusLegend";

export default function EmptyState({ onOpenFile, onDropFile }) {
  const [dragActive, setDragActive] = useState(false);

  const handleDragOver = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(true);
  };

  const handleDragLeave = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    e.stopPropagation();
    setDragActive(false);
    const file = e.dataTransfer.files?.[0];
    if (file && onDropFile) onDropFile(file);
  };

  return (
    <div
      className="flex flex-col items-center justify-center"
      style={{ minHeight: "100%", flex: 1, padding: "48px 24px" }}
      onDragOver={handleDragOver}
      onDragLeave={handleDragLeave}
      onDrop={handleDrop}
    >
      <div
        style={{
          textAlign: "center",
          maxWidth: "420px",
          border: `2px dashed ${dragActive ? "#2EA3A3" : "#C8D8D8"}`,
          borderRadius: "16px",
          padding: "48px 40px",
          background: dragActive ? "rgba(46,163,163,0.05)" : "transparent",
          transition: "border-color 0.15s, background 0.15s",
        }}
      >
        <div
          style={{
            fontSize: "32px",
            marginBottom: "16px",
            opacity: dragActive ? 1 : 0.4,
            transition: "opacity 0.15s",
          }}
        >
          ↓
        </div>
        <h2
          style={{
            fontSize: "18px",
            fontWeight: "700",
            color: "#1A3333",
            marginBottom: "8px",
            letterSpacing: "-0.01em",
          }}
        >
          {dragActive ? "Drop to import" : "Drop your file here"}
        </h2>
        <p
          style={{
            fontSize: "13px",
            color: "#5A7A7A",
            marginBottom: "28px",
            lineHeight: "1.5",
          }}
        >
          {dragActive ? "Release to load" : "or click below to browse"}
        </p>
        <button
          onClick={onOpenFile}
          style={{
            background: "#2EA3A3",
            color: "#ffffff",
            border: "none",
            borderRadius: "8px",
            padding: "10px 28px",
            fontSize: "14px",
            fontWeight: "600",
            cursor: "pointer",
            letterSpacing: "0.01em",
          }}
          onMouseOver={(e) => { e.currentTarget.style.background = "#228888"; }}
          onMouseOut={(e) => { e.currentTarget.style.background = "#2EA3A3"; }}
        >
          Import CSV
        </button>
      </div>
      {/* Status legend — first-time users see what Signal will report before they import */}
      <div style={{ maxWidth: "600px", width: "100%", marginTop: "36px" }}>
        <p style={{
          fontSize: "11px",
          fontWeight: "600",
          color: "#7A9A9A",
          letterSpacing: "0.08em",
          textTransform: "uppercase",
          marginBottom: "10px",
          textAlign: "center",
        }}>
          What Signal reports after import
        </p>
        <div style={{ border: "1px solid #dde8e8", borderRadius: "8px", overflow: "hidden" }}>
          <StatusLegend />
        </div>
      </div>
    </div>
  );
}
