"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import Link from "next/link";

export default function ExcelUploadPage() {
  const [file, setFile] = useState<File | null>(null);
  const [reference, setReference] = useState("");
  const [overwrite, setOverwrite] = useState(false);
  const [isUploading, setIsUploading] = useState(false);
  const [result, setResult] = useState<{total: number, imported: number, skipped: number} | null>(null);
  
  const router = useRouter();

  const handleUpload = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!file) return alert("Lütfen bir dosya seçin");

    setIsUploading(true);
    setResult(null);

    const formData = new FormData();
    formData.append("file", file);
    formData.append("reference", reference);
    formData.append("overwrite", String(overwrite));

    try {
      const res = await fetch("/api/leads/upload", {
        method: "POST",
        body: formData,
      });

      const data = await res.json();

      if (res.ok) {
        setResult(data.stats);
        if (data.stats.imported > 0) {
          setTimeout(() => router.push("/leads"), 3000);
        }
      } else {
        alert(data.error || "Yükleme hatası");
      }
    } catch (err) {
      alert("Sunucuya bağlanılamadı");
    } finally {
      setIsUploading(false);
    }
  };

  return (
    <div className="max-w-2xl mx-auto">
      <div className="mb-6 flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold">Excel'den Lead Yükle</h1>
          <p className="text-gray-500 mt-1">Belirlenen şablonda hazırladığınız dosyayı yükleyin.</p>
        </div>
        <Link href="/api/leads/template" target="_blank" className="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-md text-sm font-medium transition-colors">
          ⬇️ Şablon İndir
        </Link>
      </div>

      <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow border border-gray-200 dark:border-gray-700">
        <form onSubmit={handleUpload}>
          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Dosya (Excel .xlsx)
            </label>
            <input 
              type="file" 
              accept=".xlsx, .xls"
              className="w-full border p-2 rounded-md text-sm"
              onChange={(e) => setFile(e.target.files?.[0] || null)}
              required
            />
          </div>

          <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
              Genel Referans
            </label>
            <input 
              type="text" 
              className="w-full border p-2 rounded-md text-sm dark:bg-gray-700 dark:border-gray-600 dark:text-white"
              placeholder="Örn: Facebook Kampanya (Excel'de boşsa bu kullanılır)"
              value={reference}
              onChange={(e) => setReference(e.target.value)}
            />
          </div>

          <div className="mb-6 bg-yellow-50 dark:bg-yellow-900/30 p-4 border border-yellow-200 dark:border-yellow-800 rounded-md">
            <label className="flex items-start">
              <input 
                type="checkbox" 
                className="mt-1 mr-3"
                checked={overwrite}
                onChange={(e) => setOverwrite(e.target.checked)}
              />
              <span className="text-sm text-yellow-800 dark:text-yellow-200">
                <strong>Var Olanları Üzerine Yaz:</strong> Sistemde aynı telefon numarasına sahip lead varsa, mevcut bilgileri günceller. Seçili değilse kayıtlar atlanır (duplicate engellenir).
              </span>
            </label>
          </div>

          <button
            type="submit"
            disabled={isUploading || !file}
            className="w-full bg-blue-600 hover:bg-blue-500 text-white py-3 rounded-md font-medium disabled:opacity-50"
          >
            {isUploading ? "Yükleniyor ve İşleniyor..." : "Dosyayı Yükle"}
          </button>
        </form>

        {result && (
          <div className={`mt-6 p-4 rounded-md ${result.imported > 0 ? 'bg-green-50 text-green-800 border border-green-200' : 'bg-orange-50 text-orange-800 border border-orange-200'}`}>
            <h3 className="font-bold mb-2">İşlem Özeti</h3>
            <ul className="text-sm space-y-1">
              <li>Toplam Satır: {result.total}</li>
              <li>İçe Aktarılan/Güncellenen: {result.imported}</li>
              <li>Atlanan: {result.skipped}</li>
            </ul>
            {result.imported > 0 && (
              <p className="mt-2 text-sm font-medium">Otomatik olarak lead listesine yönlendiriliyorsunuz...</p>
            )}
          </div>
        )}
      </div>
    </div>
  );
}