import { RulebookViewData } from '@/lib/view-data/leagues/RulebookViewData';
import { Card } from '@/ui/Card';
import { Section } from '@/ui/Section';

interface RulebookTemplateProps {
  viewData: RulebookViewData;
}

export function RulebookTemplate({ viewData }: RulebookTemplateProps) {
  return (
    <Section>
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-white">Rulebook</h1>
          <p className="text-sm text-gray-400 mt-1">Official rules and regulations</p>
        </div>
        <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary-blue/10 border border-primary-blue/20">
          <span className="text-sm font-medium text-primary-blue">{viewData.scoringPresetName || 'Custom Rules'}</span>
        </div>
      </div>

      {/* Quick Stats */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Platform</p>
          <p className="text-lg font-semibold text-white">{viewData.gameName}</p>
        </div>
        <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Championships</p>
          <p className="text-lg font-semibold text-white">{viewData.championshipsCount}</p>
        </div>
        <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Sessions Scored</p>
          <p className="text-lg font-semibold text-white capitalize">
            {viewData.sessionTypes}
          </p>
        </div>
        <div className="bg-iron-gray rounded-lg p-4 border border-charcoal-outline">
          <p className="text-xs text-gray-500 uppercase tracking-wider mb-1">Drop Policy</p>
          <p className="text-lg font-semibold text-white truncate" title={viewData.dropPolicySummary}>
            {viewData.hasActiveDropPolicy ? 'Active' : 'None'}
          </p>
        </div>
      </div>

      {/* Points Table */}
      <Card>
        <h2 className="text-lg font-semibold text-white mb-4">Points System</h2>
        <div className="overflow-x-auto">
          <table className="w-full">
            <thead>
              <tr className="border-b border-charcoal-outline">
                <th className="text-left py-2 font-medium text-gray-400">Position</th>
                <th className="text-left py-2 font-medium text-gray-400">Points</th>
              </tr>
            </thead>
            <tbody>
              {viewData.positionPoints.map((point) => (
                <tr key={point.position} className="border-b border-charcoal-outline/50">
                  <td className="py-3 text-white">{point.position}</td>
                  <td className="py-3 text-white">{point.points}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </Card>

      {/* Bonus Points */}
      {viewData.hasBonusPoints && (
        <Card>
          <h2 className="text-lg font-semibold text-white mb-4">Bonus Points</h2>
          <div className="space-y-2">
            {viewData.bonusPoints.map((bonus, idx) => (
              <div
                key={idx}
                className="flex items-center gap-4 p-3 bg-deep-graphite rounded-lg border border-charcoal-outline"
              >
                <div className="w-8 h-8 rounded-full bg-performance-green/10 border border-performance-green/20 flex items-center justify-center shrink-0">
                  <span className="text-performance-green text-sm font-bold">+</span>
                </div>
                <p className="text-sm text-gray-300">{bonus}</p>
              </div>
            ))}
          </div>
        </Card>
      )}

      {/* Drop Policy */}
      {viewData.hasActiveDropPolicy && (
        <Card>
          <h2 className="text-lg font-semibold text-white mb-4">Drop Policy</h2>
          <p className="text-sm text-gray-300">{viewData.dropPolicySummary}</p>
          <p className="text-xs text-gray-500 mt-3">
            Drop rules are applied automatically when calculating championship standings.
          </p>
        </Card>
      )}
    </Section>
  );
}