'use client';

import React, { useState } from 'react';
import AppLayout from '@/components/AppLayout';
import { Plus, Building2, MapPin, Phone, Users, TrendingUp, Edit2, Trash2 } from 'lucide-react';
import Icon from '@/components/ui/AppIcon';


interface Branch {
  id: string;
  name: string;
  code: string;
  manager: string;
  phone: string;
  location: string;
  staff: number;
  monthlySales: number;
  status: 'active' | 'inactive';
}

const branches: Branch[] = [
  { id: 'B001', name: 'Westlands Branch', code: 'WL-001', manager: 'Amara Mwangi', phone: '+254 700 111 222', location: 'Westlands Commercial Centre, Nairobi', staff: 8, monthlySales: 1250000, status: 'active' },
  { id: 'B002', name: 'CBD Branch', code: 'CBD-001', manager: 'Jane Waweru', phone: '+254 711 222 333', location: 'Kenyatta Avenue, Nairobi CBD', staff: 6, monthlySales: 980000, status: 'active' },
  { id: 'B003', name: 'Mombasa Road Branch', code: 'MR-001', manager: 'Samuel Odhiambo', phone: '+254 722 333 444', location: 'Mombasa Road, Nairobi', staff: 4, monthlySales: 620000, status: 'active' },
  { id: 'B004', name: 'Thika Road Branch', code: 'TR-001', manager: 'Pending Assignment', phone: '+254 733 444 555', location: 'Thika Road Mall, Nairobi', staff: 0, monthlySales: 0, status: 'inactive' },
];

export default function BranchesPage() {
  const [showModal, setShowModal] = useState(false);

  const totalStaff = branches.reduce((s, b) => s + b.staff, 0);
  const totalSales = branches.reduce((s, b) => s + b.monthlySales, 0);
  const activeBranches = branches.filter((b) => b.status === 'active').length;

  return (
    <AppLayout>
      <div className="p-6 xl:p-8 max-w-screen-2xl mx-auto space-y-6">
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
          <div>
            <h1 className="text-xl font-700 text-foreground">Branches</h1>
            <p className="text-sm text-muted-foreground mt-0.5">Manage store branches, staff assignments and performance</p>
          </div>
          <button onClick={() => setShowModal(true)} className="btn-primary flex items-center gap-2 px-4 py-2 rounded-md text-sm font-600 text-white">
            <Plus size={16} />
            Add Branch
          </button>
        </div>

        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          {[
            { label: 'Total Branches', value: branches.length, icon: Building2, color: 'text-primary', bg: 'bg-primary/10' },
            { label: 'Active Branches', value: activeBranches, icon: Building2, color: 'text-success', bg: 'bg-success-bg' },
            { label: 'Total Staff', value: totalStaff, icon: Users, color: 'text-info', bg: 'bg-info-bg' },
            { label: 'Monthly Sales (KES)', value: `${(totalSales / 1000000).toFixed(1)}M`, icon: TrendingUp, color: 'text-warning', bg: 'bg-warning-bg' },
          ].map((stat) => {
            const Icon = stat.icon;
            return (
              <div key={stat.label} className="card-elevated rounded-xl p-4 flex items-center gap-3">
                <div className={`w-10 h-10 rounded-lg ${stat.bg} flex items-center justify-center flex-shrink-0`}>
                  <Icon size={18} className={stat.color} />
                </div>
                <div>
                  <p className="text-2xl font-700 text-foreground">{stat.value}</p>
                  <p className="text-xs text-muted-foreground">{stat.label}</p>
                </div>
              </div>
            );
          })}
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-5">
          {branches.map((branch) => (
            <div key={branch.id} className="card-elevated rounded-xl p-5">
              <div className="flex items-start justify-between mb-4">
                <div className="flex items-center gap-3">
                  <div className="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
                    <Building2 size={18} className="text-primary" />
                  </div>
                  <div>
                    <h3 className="font-700 text-foreground">{branch.name}</h3>
                    <p className="text-xs font-mono text-muted-foreground">{branch.code}</p>
                  </div>
                </div>
                <div className="flex items-center gap-1">
                  <span className={`text-xs px-2 py-0.5 rounded-full font-600 ${branch.status === 'active' ? 'badge-success' : 'badge-neutral'}`}>
                    {branch.status === 'active' ? 'Active' : 'Inactive'}
                  </span>
                </div>
              </div>
              <div className="space-y-2 mb-4">
                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                  <MapPin size={12} />
                  <span>{branch.location}</span>
                </div>
                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                  <Phone size={12} />
                  <span>{branch.phone}</span>
                </div>
                <div className="flex items-center gap-2 text-xs text-muted-foreground">
                  <Users size={12} />
                  <span>{branch.manager} · {branch.staff} staff</span>
                </div>
              </div>
              <div className="pt-3 border-t border-border flex items-center justify-between">
                <div>
                  <p className="text-xs text-muted-foreground">Monthly Sales</p>
                  <p className="text-sm font-700 text-foreground">KES {branch.monthlySales.toLocaleString()}</p>
                </div>
                <div className="flex gap-1">
                  <button className="p-1.5 rounded hover:bg-warning-bg text-muted-foreground hover:text-warning transition-colors"><Edit2 size={14} /></button>
                  <button className="p-1.5 rounded hover:bg-danger-bg text-muted-foreground hover:text-danger transition-colors"><Trash2 size={14} /></button>
                </div>
              </div>
            </div>
          ))}
        </div>

        {showModal && (
          <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
            <div className="bg-card rounded-xl shadow-xl w-full max-w-lg p-6 fade-in">
              <div className="flex items-center justify-between mb-5">
                <h2 className="text-base font-700 text-foreground">Add New Branch</h2>
                <button onClick={() => setShowModal(false)} className="p-1.5 rounded hover:bg-muted text-muted-foreground">✕</button>
              </div>
              <div className="grid grid-cols-2 gap-4">
                {[
                  { label: 'Branch Name', placeholder: 'e.g. Westlands Branch', span: 2 },
                  { label: 'Branch Code', placeholder: 'WL-001' },
                  { label: 'Phone Number', placeholder: '+254 7XX XXX XXX' },
                  { label: 'Location / Address', placeholder: 'Full address', span: 2 },
                  { label: 'Branch Manager', placeholder: 'Select user…' },
                  { label: 'Opening Date', placeholder: 'YYYY-MM-DD' },
                ].map((f) => (
                  <div key={f.label} className={f.span === 2 ? 'col-span-2' : ''}>
                    <label className="block text-xs font-600 text-foreground mb-1">{f.label}</label>
                    <input placeholder={f.placeholder} className="w-full h-9 px-3 text-sm bg-background border border-border rounded-md outline-none focus:border-primary text-foreground placeholder:text-muted-foreground" />
                  </div>
                ))}
              </div>
              <div className="flex gap-3 mt-6">
                <button onClick={() => setShowModal(false)} className="flex-1 h-9 rounded-md border border-border text-sm text-muted-foreground hover:bg-muted">Cancel</button>
                <button onClick={() => setShowModal(false)} className="flex-1 h-9 rounded-md btn-primary text-sm font-600 text-white">Save Branch</button>
              </div>
            </div>
          </div>
        )}
      </div>
    </AppLayout>
  );
}