"use client";

import { ExamplePills } from "./ExamplePills";

interface SearchCardProps {
  query: string;
  region: string;
  count: number;
  loading: boolean;
  onChange: (field: "query" | "region" | "count", value: string | number) => void;
  onSubmit: () => void;
}

const inputStyle: React.CSSProperties = {
  width: "100%",
  background: "#0d0d18",
  border: "1px solid #1e1e2e",
  borderRadius: 8,
  padding: "10px 12px",
  fontSize: 14,
  color: "#ffffff",
  outline: "none",
  boxSizing: "border-box",
  transition: "border-color 0.15s",
};

const labelStyle: React.CSSProperties = {
  display: "block",
  fontSize: 11,
  fontWeight: 500,
  color: "#6b7280",
  textTransform: "uppercase",
  letterSpacing: "0.05em",
  marginBottom: 6,
};

export function SearchCard({ query, region, count, loading, onChange, onSubmit }: SearchCardProps) {
  const canSubmit = query.trim().length > 0 && !loading;

  return (
    <div
      style={{
        background: "#111118",
        border: "1px solid #1e1e2e",
        borderRadius: 12,
        padding: 24,
        opacity: loading ? 0.55 : 1,
        pointerEvents: loading ? "none" : "auto",
        transition: "opacity 0.2s",
      }}
    >
      <style>{`
        .search-input:hover { border-color: #2e2e3e !important; }
        .search-input:focus { border-color: #3b82f6 !important; }
        .search-btn:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-1px); }
        .search-btn:active:not(:disabled) { transform: translateY(0); }
        .search-btn { transition: filter 0.15s, transform 0.15s, opacity 0.15s; }
        @media (max-width: 600px) {
          .search-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>

      {/* 3-column grid */}
      <div
        className="search-grid"
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr 120px",
          gap: 12,
          marginBottom: 16,
        }}
      >
        {/* Suchbegriff */}
        <div>
          <label style={labelStyle}>Suchbegriff</label>
          <input
            className="search-input"
            type="text"
            value={query}
            onChange={(e) => onChange("query", e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter" && canSubmit) onSubmit(); }}
            placeholder="z.B. Dachdecker, Solaranlage…"
            style={inputStyle}
          />
        </div>

        {/* Region */}
        <div>
          <label style={labelStyle}>Region</label>
          <input
            className="search-input"
            type="text"
            value={region}
            onChange={(e) => onChange("region", e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter" && canSubmit) onSubmit(); }}
            placeholder="z.B. Bayern, München…"
            style={inputStyle}
          />
        </div>

        {/* Anzahl */}
        <div>
          <label style={labelStyle}>Anzahl</label>
          <select
            className="search-input"
            value={count}
            onChange={(e) => onChange("count", Number(e.target.value))}
            style={{ ...inputStyle, cursor: "pointer" }}
          >
            <option value={25}>25 Leads</option>
            <option value={50}>50 Leads</option>
            <option value={100}>100 Leads</option>
          </select>
        </div>
      </div>

      {/* Submit button */}
      <button
        className="search-btn"
        onClick={onSubmit}
        disabled={!canSubmit}
        style={{
          width: "100%",
          background: canSubmit ? "linear-gradient(135deg, #3b82f6, #8b5cf6)" : "#1e1e2e",
          color: canSubmit ? "#ffffff" : "#6b7280",
          border: "none",
          borderRadius: 10,
          padding: "12px 16px",
          fontSize: 14,
          fontWeight: 500,
          cursor: canSubmit ? "pointer" : "not-allowed",
          opacity: canSubmit ? 1 : 0.5,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          gap: 8,
          marginBottom: 20,
        }}
      >
        <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
          <circle cx="6.5" cy="6.5" r="4.5" stroke="currentColor" strokeWidth="1.5" />
          <line x1="10.5" y1="10.5" x2="13.5" y2="13.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
        </svg>
        Leads suchen
      </button>

      {/* Divider */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 16 }}>
        <div style={{ flex: 1, height: 1, background: "#1e1e2e" }} />
        <span style={{ fontSize: 12, color: "#6b7280", flexShrink: 0 }}>Beispielsuche</span>
        <div style={{ flex: 1, height: 1, background: "#1e1e2e" }} />
      </div>

      <ExamplePills
        onSelect={(q, r) => {
          onChange("query", q);
          onChange("region", r);
        }}
      />
    </div>
  );
}