import React from 'react';
import { Building2, TrendingUp, TrendingDown } from 'lucide-react';

interface Branch {
  id: string;
  name: string;
  sales: number;
  target: number;
  txns: number;
  trend: 'up' | 'down';
  trendPct: string;
}

const branches: Branch[] = [
  { id: 'branch-westlands', name: 'Westlands', sales: 284750, target: 300000, txns: 347, trend: 'up', trendPct: '+12.4%' },
  { id: 'branch-cbd', name: 'CBD', sales: 198400, target: 220000, txns: 241, trend: 'down', trendPct: '-4.2%' },
  { id: 'branch-parklands', name: 'Parklands', sales: 162300, target: 180000, txns: 198, trend: 'up', trendPct: '+7.8%' },
  { id: 'branch-karen', name: 'Karen', sales: 94800, target: 120000, txns: 115, trend: 'down', trendPct: '-11.6%' },
];

export default function BranchPerformance() {
  const maxSales = Math.max(...branches.map((b) => b.sales));

  return (
    <div className="card-elevated rounded-xl overflow-hidden">
      <div className="flex items-center gap-2 px-4 py-3.5 border-b border-border">
        <Building2 size={15} className="text-muted-foreground" />
        <h3 className="text-sm font-600 text-foreground">Branch Performance</h3>
        <span className="text-xs text-muted-foreground ml-auto">vs target · today</span>
      </div>
      <ul className="divide-y divide-border">
        {branches.map((b) => {
          const pct = Math.round((b.sales / b.target) * 100);
          const barPct = Math.round((b.sales / maxSales) * 100);
          return (
            <li key={b.id} className="px-4 py-3 hover:bg-muted/30 transition-colors">
              <div className="flex items-center justify-between mb-1.5">
                <div className="flex items-center gap-2">
                  <span className="text-xs font-600 text-foreground">{b.name}</span>
                  <span className="text-xs text-muted-foreground font-tabular">{b.txns} txns</span>
                </div>
                <div className="flex items-center gap-1.5">
                  {b.trend === 'up'
                    ? <TrendingUp size={11} className="text-success" />
                    : <TrendingDown size={11} className="text-danger" />
                  }
                  <span className={`text-xs font-600 ${b.trend === 'up' ? 'text-success' : 'text-danger'}`}>
                    {b.trendPct}
                  </span>
                </div>
              </div>
              <div className="flex items-center gap-2 mb-1">
                <div className="flex-1 h-1.5 bg-muted rounded-full overflow-hidden">
                  <div
                    className={`h-full rounded-full ${pct >= 90 ? 'bg-success' : pct >= 70 ? 'bg-primary' : 'bg-warning'}`}
                    style={{ width: `${barPct}%` }}
                  />
                </div>
                <span className="text-xs font-tabular text-muted-foreground w-8 text-right">{pct}%</span>
              </div>
              <p className="text-xs text-muted-foreground font-tabular">
                KES {b.sales.toLocaleString()} / {b.target.toLocaleString()}
              </p>
            </li>
          );
        })}
      </ul>
    </div>
  );
}