import React, { useState } from 'react';
import { useApp } from '../../context/AppContext';
import { FolderKanban, FileText, Upload, Plus, ShieldCheck, AlertCircle, CheckCircle2, Download, Trash2, Tag, Calendar } from 'lucide-react';
import confetti from 'canvas-confetti';

export const DocumentVault = () => {
  const { vaultDocuments, setVaultDocuments, userProfile } = useApp();
  const [docName, setDocName] = useState('');
  const [category, setCategory] = useState('Kalite Belgeleri');

  const handleAddDocument = (e) => {
    e.preventDefault();
    if (!docName.trim()) return;

    const newDoc = {
      id: 'doc-' + Date.now(),
      name: docName.endsWith('.pdf') ? docName : docName + '.pdf',
      category,
      size: (Math.random() * 2 + 0.5).toFixed(1) + ' MB',
      updatedAt: new Date().toISOString().split('T')[0],
      expiresAt: '2027-12-31',
      status: 'Geçerli'
    };

    setVaultDocuments(prev => [newDoc, ...prev]);
    setDocName('');
    confetti({ particleCount: 60 });
  };

  const deleteDoc = (id) => {
    setVaultDocuments(prev => prev.filter(d => d.id !== id));
  };

  return (
    <div className="space-y-6 animate-fade-in">
      
      {/* Header */}
      <div className="bg-linear-to-r from-slate-900 via-blue-950 to-indigo-900 text-white p-6 rounded-2xl shadow-lg border border-blue-800/40 flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
        <div className="flex items-center gap-3">
          <div className="w-12 h-12 rounded-2xl bg-blue-600 text-white flex items-center justify-center font-black shadow-md">
            <FolderKanban className="w-6 h-6" />
          </div>
          <div>
            <div className="flex items-center gap-2">
              <h2 className="font-extrabold text-xl">Doküman ve Teklif Deposu</h2>
              <span className="bg-emerald-500 text-slate-950 text-[10px] font-extrabold px-2.5 py-0.5 rounded-full uppercase tracking-wider">
                Resmi Evrak Kütüphanesi
              </span>
            </div>
            <p className="text-xs text-blue-200 mt-0.5">Sık kullanılan resmi belgelerinizi (İmza sirküleri, ISO, ÜTS, Faaliyet Belgesi) tek yerde saklayın; ihale teklif paketine saniyeler içinde ekleyin.</p>
          </div>
        </div>
      </div>

      {/* Add Document Form */}
      <form onSubmit={handleAddDocument} className="bg-white p-5 rounded-2xl border border-slate-200 shadow-xs flex flex-col md:flex-row gap-3 items-end">
        <div className="flex-1 space-y-1.5 w-full">
          <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">Yeni Doküman Adı</label>
          <input
            type="text"
            required
            value={docName}
            onChange={(e) => setDocName(e.target.value)}
            placeholder="Örn: 2026 ISO 9001 Kalite Belgesi.pdf"
            className="w-full bg-slate-50 border border-slate-300 rounded-xl px-4 py-2.5 text-xs font-semibold text-slate-900 focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <div className="w-full md:w-64 space-y-1.5">
          <label className="block text-xs font-bold text-slate-800 uppercase tracking-wider">Kategori</label>
          <select
            value={category}
            onChange={(e) => setCategory(e.target.value)}
            className="w-full bg-slate-50 border border-slate-300 rounded-xl px-3 py-2.5 text-xs font-semibold text-slate-900"
          >
            <option>Yasal Belgeler</option>
            <option>Kalite Belgeleri</option>
            <option>Tıbbi Cihaz Kaydı</option>
            <option>Resmi Kayıtlar</option>
            <option>Mali Belgeler</option>
          </select>
        </div>

        <button
          type="submit"
          className="w-full md:w-auto bg-blue-600 hover:bg-blue-500 text-white font-extrabold text-xs px-6 py-3 rounded-xl flex items-center justify-center gap-2 shadow-md transition-colors shrink-0"
        >
          <Upload className="w-4 h-4" />
          <span>Depoya Ekle</span>
        </button>
      </form>

      {/* Documents Grid */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {vaultDocuments.map((doc) => (
          <div key={doc.id} className="bg-white p-5 rounded-2xl border border-slate-200 shadow-xs hover:shadow-md transition-all space-y-3 flex flex-col justify-between">
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <span className="bg-slate-100 text-slate-700 font-bold text-[10px] px-2.5 py-1 rounded-lg border border-slate-200 flex items-center gap-1">
                  <Tag className="w-3 h-3 text-blue-600" /> {doc.category}
                </span>
                <span className="text-[10px] font-bold text-emerald-700 bg-emerald-50 border border-emerald-200 px-2 py-0.5 rounded-full flex items-center gap-1">
                  <ShieldCheck className="w-3 h-3" /> {doc.status}
                </span>
              </div>

              <div className="flex items-start gap-3 pt-1">
                <div className="w-10 h-10 rounded-xl bg-red-50 text-red-600 border border-red-200 flex items-center justify-center shrink-0 font-black">
                  <FileText className="w-5 h-5" />
                </div>
                <div>
                  <h4 className="font-bold text-xs text-slate-900 leading-snug line-clamp-2">{doc.name}</h4>
                  <p className="text-[10px] text-slate-400 mt-0.5">Boyut: {doc.size}</p>
                </div>
              </div>
            </div>

            <div className="border-t border-slate-100 pt-3 flex items-center justify-between text-[11px] text-slate-500 font-medium">
              <span className="flex items-center gap-1 text-slate-600">
                <Calendar className="w-3.5 h-3.5 text-slate-400" /> Son Geçerlilik: <strong>{doc.expiresAt}</strong>
              </span>

              <div className="flex items-center gap-1">
                <button
                  onClick={() => alert(`${doc.name} başarıyla indirildi.`)}
                  className="p-1.5 text-slate-600 hover:text-blue-600 rounded-lg hover:bg-slate-100 transition-colors"
                  title="İndir"
                >
                  <Download className="w-4 h-4" />
                </button>
                <button
                  onClick={() => deleteDoc(doc.id)}
                  className="p-1.5 text-slate-400 hover:text-red-600 rounded-lg hover:bg-red-50 transition-colors"
                  title="Sil"
                >
                  <Trash2 className="w-4 h-4" />
                </button>
              </div>
            </div>

          </div>
        ))}
      </div>

    </div>
  );
};