'use client';

import React, { useState } from 'react';
import { 
  ArrowLeft, 
  Plus, 
  QrCode, 
  Settings, 
  CheckCircle2, 
  AlertCircle,
  Hash,
  MoveUp,
  Weight,
  Tag
} from 'lucide-react';
import { useParams, useRouter } from 'next/navigation';

export default function BinaDetay() {
  const params = useParams();
  const router = useRouter();
  const [showAddForm, setShowAddForm] = useState(false);

  // Mock Data
  const building = { id: params.id, name: 'Güneş Apartmanı', address: 'Huzur Mah. 123. Sokak No:5, Ankara' };
  
  const elevators = [
    { 
      id: 1, 
      label: 'A Blok - Sol', 
      kimlikNo: '12345678', 
      kapasite: '630 Kg / 8 Kişi', 
      etiket: 'Yeşil', 
      gecerlilik: '01.01.2027',
      durum: 'Aktif' 
    },
    { 
      id: 2, 
      label: 'A Blok - Sağ', 
      kimlikNo: '12345679', 
      kapasite: '630 Kg / 8 Kişi', 
      etiket: 'Mavi', 
      gecerlilik: '15.06.2026',
      durum: 'Bakımda' 
    },
  ];

  return (
    <div>
      <div style={{ marginBottom: '2rem' }}>
        <button 
          onClick={() => router.back()}
          style={{ 
            background: 'none', 
            border: 'none', 
            display: 'flex', 
            alignItems: 'center', 
            gap: '0.5rem', 
            color: 'var(--muted-foreground)', 
            cursor: 'pointer',
            marginBottom: '1rem',
            fontWeight: 500
          }}
        >
          <ArrowLeft size={18} /> Geri Dön
        </button>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <h1 style={{ fontSize: '1.75rem', fontWeight: 800, color: 'var(--secondary)' }}>{building.name}</h1>
            <p style={{ color: 'var(--muted-foreground)' }}>{building.address}</p>
          </div>
          <button 
            onClick={() => setShowAddForm(true)}
            className="btn-primary"
          >
            <Plus size={18} />
            Yeni Asansör Ekle
          </button>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '1.5rem' }}>
        {elevators.map((elev) => (
          <div key={elev.id} className="premium-card" style={{ padding: '0' }}>
            <div style={{ padding: '1.5rem', borderBottom: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
                <div style={{ 
                  background: 'var(--primary)15', 
                  padding: '0.5rem', 
                  borderRadius: '0.5rem',
                  color: 'var(--primary)'
                }}>
                  <MoveUp size={20} />
                </div>
                <div>
                  <h3 style={{ fontWeight: 700 }}>{elev.label}</h3>
                  <span style={{ fontSize: '0.75rem', color: 'var(--muted-foreground)' }}>ID: {elev.kimlikNo}</span>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                <span style={{ 
                  fontSize: '0.7rem', 
                  fontWeight: 700, 
                  padding: '0.2rem 0.5rem', 
                  borderRadius: '4px',
                  background: elev.etiket === 'Yeşil' ? '#10b981' : elev.etiket === 'Mavi' ? '#3b82f6' : '#f59e0b',
                  color: 'white'
                }}>
                  {elev.etiket} Etiket
                </span>
                <button style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--muted-foreground)' }}>
                  <Settings size={18} />
                </button>
              </div>
            </div>

            <div style={{ padding: '1.25rem', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                <Weight size={16} color="var(--muted-foreground)" />
                <span style={{ fontSize: '0.85rem' }}>{elev.kapasite}</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
                <Tag size={16} color="var(--muted-foreground)" />
                <span style={{ fontSize: '0.85rem' }}>Son Kontrol: {elev.gecerlilik}</span>
              </div>
            </div>

            <div style={{ padding: '1rem 1.5rem', background: 'var(--muted)', borderBottomLeftRadius: 'var(--radius)', borderBottomRightRadius: 'var(--radius)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem' }}>
                {elev.durum === 'Aktif' ? <CheckCircle2 size={14} color="#10b981" /> : <AlertCircle size={14} color="#f59e0b" />}
                <span style={{ fontSize: '0.8rem', fontWeight: 600 }}>{elev.durum}</span>
              </div>
              <button style={{ 
                background: 'white', 
                border: '1px solid var(--border)', 
                padding: '0.4rem 0.75rem', 
                borderRadius: '0.5rem', 
                fontSize: '0.8rem', 
                fontWeight: 600,
                display: 'flex',
                alignItems: 'center',
                gap: '0.4rem',
                cursor: 'pointer'
              }}>
                <QrCode size={14} /> Karekod Yazdır
              </button>
            </div>
          </div>
        ))}
      </div>

      {/* Placeholder for Add Form Modal */}
      {showAddForm && (
        <div style={{ 
          position: 'fixed', 
          inset: 0, 
          background: 'rgba(0,0,0,0.5)', 
          display: 'flex', 
          alignItems: 'center', 
          justifyContent: 'center',
          backdropFilter: 'blur(4px)',
          zIndex: 100
        }}>
          <div className="premium-card" style={{ width: '100%', maxWidth: '500px' }}>
            <h2 style={{ marginBottom: '1.5rem', fontWeight: 800 }}>Yeni Asansör Kaydı</h2>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
              <input placeholder="Asansör Adı (Örn: A Blok)" style={inputStyle} />
              <input placeholder="Belediye/Bakanlık Kimlik No" style={inputStyle} />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
                <input placeholder="Kapasite (Kg)" style={inputStyle} />
                <input placeholder="Kişi Sayısı" style={inputStyle} />
              </div>
              <select style={inputStyle}>
                <option>Etiket Rengi Seçiniz</option>
                <option>Yeşil</option>
                <option>Mavi</option>
                <option>Sarı</option>
                <option>Kırmızı</option>
              </select>
              <div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
                <button 
                  onClick={() => setShowAddForm(false)}
                  className="btn-primary" 
                  style={{ background: 'var(--muted)', color: 'var(--secondary)', flex: 1 }}
                >
                  İptal
                </button>
                <button className="btn-primary" style={{ flex: 1 }}>Kaydet</button>
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

const inputStyle = {
  width: '100%',
  padding: '0.75rem 1rem',
  borderRadius: '0.75rem',
  border: '1px solid var(--border)',
  background: 'var(--muted)',
  fontSize: '0.9rem',
  outline: 'none'
};