"use client";

import { useState } from "react";
import { motion } from "framer-motion";

type Booking = {
  id: string;
  customer: string;
  service: string;
  date: string;
  time: string;
  status: "confirmed" | "pending" | "cancelled";
};

type Lead = {
  id: string;
  name: string;
  phone: string;
  message: string;
  date: string;
  status: "new" | "contacted" | "qualified";
};

// Mock data for demo
const mockBookings: Booking[] = [
  { id: "1", customer: "María García", service: "Cita consulta", date: "2026-02-17", time: "10:00", status: "confirmed" },
  { id: "2", customer: "John Smith", service: "Treatment", date: "2026-02-17", time: "14:30", status: "pending" },
  { id: "3", customer: "Carlos Ruiz", service: "Reserva mesa", date: "2026-02-18", time: "20:00", status: "confirmed" },
  { id: "4", customer: "Ana López", service: "Cita estética", date: "2026-02-19", time: "11:00", status: "confirmed" },
  { id: "5", customer: "Pierre Dubois", service: "Booking", date: "2026-02-19", time: "16:00", status: "confirmed" },
];

const mockLeads: Lead[] = [
  { id: "1", name: "María García", phone: "+34 612 345 678", message: "Hola, me gustaría información sobre...", date: "2026-02-16", status: "new" },
  { id: "2", name: "John Smith", phone: "+44 7700 900123", message: "Do you have availability for next week?", date: "2026-02-16", status: "qualified" },
  { id: "3", name: "Carlos Ruiz", phone: "+34 654 987 321", message: "Quiero reservar para 4 personas", date: "2026-02-15", status: "contacted" },
];

export default function DashboardPage() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loginError, setLoginError] = useState("");
  const [activeTab, setActiveTab] = useState<"bookings" | "leads" | "analytics">("bookings");

  const handleLogin = () => {
    if (email === "User" && password === "#SiteMenteUserpass2026") {
      setIsLoggedIn(true);
      setLoginError("");
    } else {
      setLoginError("Invalid credentials");
    }
  };

  if (!isLoggedIn) {
    return (
      <div className="min-h-screen bg-[#1a1625] flex items-center justify-center p-4">
        <motion.div 
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="w-full max-w-md"
        >
          <div className="text-center mb-8">
            <div className="text-5xl mb-4">🏢</div>
            <h1 className="text-3xl font-bold text-white mb-2">SiteMente</h1>
            <p className="text-white/60">Client Dashboard</p>
          </div>
          
          <div className="bg-white/5 border border-white/10 rounded-2xl p-6">
            <div className="space-y-4">
              <div>
                <label className="text-sm text-white/60 mb-1 block">Username</label>
                <input 
                  type="text" 
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="User"
                  className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder:text-white/30"
                />
              </div>
              <div>
                <label className="text-sm text-white/60 mb-1 block">Password</label>
                <input 
                  type="password" 
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="••••••••"
                  className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder:text-white/30"
                />
              </div>
              {loginError && (
                <p className="text-red-400 text-sm">{loginError}</p>
              )}
              <button 
                onClick={handleLogin}
                className="w-full py-3 bg-brand-pink rounded-lg font-semibold text-white hover:bg-[#ff7bc0] transition"
              >
                Login
              </button>
              <p className="text-center text-white/40 text-sm">
                Ask SiteMente to create your dashboard
              </p>
            </div>
          </div>
        </motion.div>
      </div>
    );
  }

  const stats = {
    totalBookings: mockBookings.length,
    confirmed: mockBookings.filter(b => b.status === "confirmed").length,
    pending: mockBookings.filter(b => b.status === "pending").length,
    totalLeads: mockLeads.length,
    newLeads: mockLeads.filter(l => l.status === "new").length,
  };

  return (
    <div className="min-h-screen bg-[#1a1625] text-white">
      {/* Header */}
      <header className="border-b border-white/10 bg-[#1a1625]/90 backdrop-blur sticky top-0 z-50">
        <div className="mx-auto flex w-full max-w-6xl items-center justify-between px-6 py-4">
          <div className="flex items-center gap-4">
            <span className="text-2xl">🏢</span>
            <span className="font-bold text-xl">SiteMente Dashboard</span>
          </div>
          <div className="flex items-center gap-4">
            <span className="text-white/60">SiteMente Restaurant Demo</span>
            <button 
              onClick={() => setIsLoggedIn(false)}
              className="text-sm text-white/60 hover:text-white"
            >
              Logout
            </button>
          </div>
        </div>
      </header>

      <main className="mx-auto max-w-6xl px-6 py-8">
        {/* Stats */}
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
          <div className="bg-white/5 rounded-xl p-4 border border-white/10">
            <p className="text-2xl font-bold text-brand-pink">{stats.totalBookings}</p>
            <p className="text-sm text-white/60">Total Bookings</p>
          </div>
          <div className="bg-green-500/10 rounded-xl p-4 border border-green-500/30">
            <p className="text-2xl font-bold text-green-400">{stats.confirmed}</p>
            <p className="text-sm text-white/60">Confirmed</p>
          </div>
          <div className="bg-yellow-500/10 rounded-xl p-4 border border-yellow-500/30">
            <p className="text-2xl font-bold text-yellow-400">{stats.pending}</p>
            <p className="text-sm text-white/60">Pending</p>
          </div>
          <div className="bg-blue-500/10 rounded-xl p-4 border border-blue-500/30">
            <p className="text-2xl font-bold text-blue-400">{stats.totalLeads}</p>
            <p className="text-sm text-white/60">Total Leads</p>
          </div>
          <div className="bg-purple-500/10 rounded-xl p-4 border border-purple-500/30">
            <p className="text-2xl font-bold text-purple-400">{stats.newLeads}</p>
            <p className="text-sm text-white/60">New Leads</p>
          </div>
        </div>

        {/* Tabs */}
        <div className="flex gap-2 mb-6">
          <button
            onClick={() => setActiveTab("bookings")}
            className={`px-4 py-2 rounded-lg font-medium transition ${activeTab === "bookings" ? "bg-brand-pink" : "bg-white/10 hover:bg-white/20"}`}
          >
            📅 Bookings
          </button>
          <button
            onClick={() => setActiveTab("leads")}
            className={`px-4 py-2 rounded-lg font-medium transition ${activeTab === "leads" ? "bg-brand-pink" : "bg-white/10 hover:bg-white/20"}`}
          >
            📩 Leads
          </button>
          <button
            onClick={() => setActiveTab("analytics")}
            className={`px-4 py-2 rounded-lg font-medium transition ${activeTab === "analytics" ? "bg-brand-pink" : "bg-white/10 hover:bg-white/20"}`}
          >
            📈 Analytics
          </button>
        </div>

        {/* Bookings Tab */}
        {activeTab === "bookings" && (
          <div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
            <table className="w-full">
              <thead className="bg-white/5 border-b border-white/10">
                <tr>
                  <th className="text-left px-4 py-3 text-sm font-medium text-white/60">Customer</th>
                  <th className="text-left px-4 py-3 text-sm font-medium text-white/60">Service</th>
                  <th className="text-left px-4 py-3 text-sm font-medium text-white/60">Date</th>
                  <th className="text-left px-4 py-3 text-sm font-medium text-white/60">Time</th>
                  <th className="text-left px-4 py-3 text-sm font-medium text-white/60">Status</th>
                </tr>
              </thead>
              <tbody>
                {mockBookings.map((booking) => (
                  <tr key={booking.id} className="border-b border-white/5">
                    <td className="px-4 py-3">{booking.customer}</td>
                    <td className="px-4 py-3">{booking.service}</td>
                    <td className="px-4 py-3">{booking.date}</td>
                    <td className="px-4 py-3">{booking.time}</td>
                    <td className="px-4 py-3">
                      <span className={`px-2 py-1 rounded-full text-xs ${
                        booking.status === "confirmed" ? "bg-green-500/20 text-green-400" :
                        booking.status === "pending" ? "bg-yellow-500/20 text-yellow-400" :
                        "bg-red-500/20 text-red-400"
                      }`}>
                        {booking.status}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {/* Leads Tab */}
        {activeTab === "leads" && (
          <div className="bg-white/5 rounded-xl border border-white/10 overflow-hidden">
            <table className="w-full">
              <thead className="bg-white/5 border-b border-white/10">
                <tr>
                  <th className="text-left px-4 py-3 text-sm font-medium text-white/60">Name</th>
                  <th className="text-left px-4 py-3 text-sm font-medium text-white/60">Phone</th>
                  <th className="text-left px-4 py-3 text-sm font-medium text-white/60">Message</th>
                  <th className="text-left px-4 py-3 text-sm font-medium text-white/60">Date</th>
                  <th className="text-left px-4 py-3 text-sm font-medium text-white/60">Status</th>
                </tr>
              </thead>
              <tbody>
                {mockLeads.map((lead) => (
                  <tr key={lead.id} className="border-b border-white/5">
                    <td className="px-4 py-3">{lead.name}</td>
                    <td className="px-4 py-3">
                      <a href={`tel:${lead.phone}`} className="text-brand-pink hover:underline">{lead.phone}</a>
                    </td>
                    <td className="px-4 py-3 text-white/70 text-sm">{lead.message}</td>
                    <td className="px-4 py-3">{lead.date}</td>
                    <td className="px-4 py-3">
                      <span className={`px-2 py-1 rounded-full text-xs ${
                        lead.status === "new" ? "bg-blue-500/20 text-blue-400" :
                        lead.status === "qualified" ? "bg-green-500/20 text-green-400" :
                        "bg-yellow-500/20 text-yellow-400"
                      }`}>
                        {lead.status}
                      </span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {/* Analytics Tab */}
        {activeTab === "analytics" && (
          <div className="grid md:grid-cols-2 gap-6">
            <div className="bg-white/5 rounded-xl border border-white/10 p-6">
              <h3 className="text-lg font-semibold mb-4">Bookings This Week</h3>
              <div className="flex items-end gap-2 h-40">
                {[3, 5, 2, 4, 6, 3, 5].map((h, i) => (
                  <div key={i} className="flex-1 bg-brand-pink/50 rounded-t" style={{ height: `${h * 14}%` }}></div>
                ))}
              </div>
              <div className="flex justify-between mt-2 text-xs text-white/40">
                <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
              </div>
            </div>
            <div className="bg-white/5 rounded-xl border border-white/10 p-6">
              <h3 className="text-lg font-semibold mb-4">Lead Sources</h3>
              <div className="space-y-3">
                <div>
                  <div className="flex justify-between text-sm mb-1">
                    <span>🌐 Website</span>
                    <span className="text-brand-pink">65%</span>
                  </div>
                  <div className="h-2 bg-white/10 rounded-full overflow-hidden">
                    <div className="h-full bg-brand-pink w-[65%]"></div>
                  </div>
                </div>
                <div>
                  <div className="flex justify-between text-sm mb-1">
                    <span>💬 WhatsApp</span>
                    <span className="text-green-400">25%</span>
                  </div>
                  <div className="h-2 bg-white/10 rounded-full overflow-hidden">
                    <div className="h-full bg-green-500 w-[25%]"></div>
                  </div>
                </div>
                <div>
                  <div className="flex justify-between text-sm mb-1">
                    <span>📞 Phone</span>
                    <span className="text-blue-400">10%</span>
                  </div>
                  <div className="h-2 bg-white/10 rounded-full overflow-hidden">
                    <div className="h-full bg-blue-500 w-[10%]"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        )}

        <p className="text-center text-white/40 text-sm mt-8">
          Powered by SiteMente AI • Your AI Employee working 24/7
        </p>
      </main>
    </div>
  );
}