// Components/CompanyImporters/ImportShell.jsx
export default function ImportShell({
  company,
  fileName,
  parsing,
  uploading,
  parsedCount,
  error,
  result,
  onPickFile,
  onUpload,
  onBack,
}) {
  return (
    <div className="min-h-screen bg-[#fafafa] p-4 sm:p-6 lg:p-8">
      {/* Header */}
      <div className="rounded-3xl border border-black/10 bg-white shadow-sm p-5 sm:p-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex items-center gap-4">
          <div className="h-14 w-14 rounded-3xl border border-black/10 bg-white shadow-sm overflow-hidden grid place-items-center">
            <img
              src={`/companies/${company.logo}`}
              alt={company.name}
              className="h-full w-full object-contain p-2"
            />
          </div>
          <div>
            <h1 className="text-2xl sm:text-3xl font-extrabold tracking-tight text-black/90">
              {company.name}
            </h1>
            <div className="mt-1 text-sm text-black/55">
              Excel dosyası okunur ve poliçe verileri ayrıştırılarak sisteme hazırlanır.
            </div>
          </div>
        </div>

        <button
          onClick={onBack}
          className="rounded-2xl border border-black/10 bg-white px-4 py-3 text-sm font-semibold text-black/70 hover:bg-black/[0.03] transition"
        >
          ← Poliçeler
        </button>
      </div>

      {/* Upload box */}
      <div className="mt-4 rounded-3xl border border-black/10 bg-white shadow-sm p-5 sm:p-6">
        <div className="flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
          <div>
            <div className="text-sm font-extrabold text-black/80">Excel Yükleme</div>
            <div className="mt-1 text-sm text-black/55">
              .xlsx / .xls / .csv desteklenir. İlk sayfa okunur.
            </div>
          </div>

          <div className="flex flex-wrap gap-2">
            <label className="inline-flex items-center justify-center cursor-pointer rounded-2xl px-4 py-3 text-sm font-semibold text-white bg-gradient-to-r from-red-600 to-red-500 shadow-lg shadow-red-600/15 hover:brightness-[1.02] active:scale-[0.99] transition">
              {parsing ? "Okunuyor..." : "Dosya Seç"}
              <input
                type="file"
                className="hidden"
                onChange={onPickFile}
                disabled={parsing || uploading}
              />
            </label>

            <button
              onClick={onUpload}
              disabled={!parsedCount || parsing || uploading}
              className="rounded-2xl cursor-pointer px-4 py-3 text-sm font-semibold text-white bg-black hover:bg-black/90 transition disabled:opacity-60 disabled:cursor-not-allowed"
            >
              {uploading ? "Yükleniyor..." : `Yükle (${parsedCount})`}
            </button>
          </div>
        </div>

        <div className="mt-4 grid grid-cols-1 md:grid-cols-3 gap-3">
          <StatCard label="Dosya" value={fileName || "Seçilmedi"} />
          <StatCard label="Okunan Kayıt" value={String(parsedCount || 0)} />
          <StatCard
            label="Durum"
            value={
              parsing ? "Okunuyor..." : uploading ? "Yükleniyor..." : error ? "Hata" : "Hazır"
            }
            tone={parsing || uploading ? "amber" : error ? "red" : "green"}
          />
        </div>

        {error && (
          <div className="mt-4 rounded-2xl border border-red-200 bg-red-50 px-4 py-3 text-sm font-semibold text-red-600">
            {error}
          </div>
        )}

        {result && (
          <div className="mt-4 rounded-2xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
            <div className="font-extrabold">İçe Aktarma Tamamlandı</div>
            <div className="mt-1">
              Geçerli Kayıt: <b>{result.valid}</b> • Yeni Eklenen: <b>{result.created}</b> •
              Güncellenen: <b>{result.updated}</b> • Atlanan: <b>{result.skipped}</b>
            </div>
            {!!result.errors?.length && (
              <div className="mt-2 text-xs text-emerald-900/70">
                Bazı satırlarda hata var.
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

function StatCard({ label, value, tone = "default" }) {
  const cls =
    tone === "red"
      ? "bg-red-50 border-red-200 text-red-600"
      : tone === "amber"
      ? "bg-amber-50 border-amber-200 text-amber-700"
      : tone === "green"
      ? "bg-emerald-50 border-emerald-200 text-emerald-700"
      : "bg-white border-black/10 text-black/70";

  return (
    <div className={`rounded-3xl border p-4 ${cls}`}>
      <div className="text-xs font-semibold opacity-70">{label}</div>
      <div className="mt-1 text-sm font-extrabold">{value}</div>
    </div>
  );
}