import { LeagueSettingsViewData } from '@/lib/view-data/leagues/LeagueSettingsViewData';
import { Card } from '@/ui/Card';
import { Section } from '@/ui/Section';
import { Settings, Users, Trophy, Shield, Clock } from 'lucide-react';

interface LeagueSettingsTemplateProps {
  viewData: LeagueSettingsViewData;
}

export function LeagueSettingsTemplate({ viewData }: LeagueSettingsTemplateProps) {
  return (
    <Section>
      <div className="flex items-center justify-between mb-6">
        <div>
          <h2 className="text-xl font-semibold text-white">League Settings</h2>
          <p className="text-sm text-gray-400 mt-1">
            Manage your league configuration and preferences
          </p>
        </div>
      </div>

      <div className="space-y-6">
        {/* League Information */}
        <Card>
          <div className="flex items-center gap-3 mb-4">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary-blue/10">
              <Settings className="w-5 h-5 text-primary-blue" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-white">League Information</h3>
              <p className="text-sm text-gray-400">Basic league details</p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-1">Name</label>
              <p className="text-white">{viewData.league.name}</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-1">Visibility</label>
              <p className="text-white capitalize">{viewData.league.visibility}</p>
            </div>
            <div className="md:col-span-2">
              <label className="block text-sm font-medium text-gray-400 mb-1">Description</label>
              <p className="text-white">{viewData.league.description}</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-1">Created</label>
              <p className="text-white">{new Date(viewData.league.createdAt).toLocaleDateString()}</p>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-400 mb-1">Owner ID</label>
              <p className="text-white font-mono text-sm">{viewData.league.ownerId}</p>
            </div>
          </div>
        </Card>

        {/* Configuration */}
        <Card>
          <div className="flex items-center gap-3 mb-4">
            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-performance-green/10">
              <Trophy className="w-5 h-5 text-performance-green" />
            </div>
            <div>
              <h3 className="text-lg font-semibold text-white">Configuration</h3>
              <p className="text-sm text-gray-400">League rules and limits</p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="flex items-center gap-3">
              <Users className="w-5 h-5 text-gray-400" />
              <div>
                <p className="text-sm font-medium text-gray-400">Max Drivers</p>
                <p className="text-white">{viewData.config.maxDrivers}</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <Shield className="w-5 h-5 text-gray-400" />
              <div>
                <p className="text-sm font-medium text-gray-400">Require Approval</p>
                <p className="text-white">{viewData.config.requireApproval ? 'Yes' : 'No'}</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <Clock className="w-5 h-5 text-gray-400" />
              <div>
                <p className="text-sm font-medium text-gray-400">Allow Late Join</p>
                <p className="text-white">{viewData.config.allowLateJoin ? 'Yes' : 'No'}</p>
              </div>
            </div>

            <div className="flex items-center gap-3">
              <Trophy className="w-5 h-5 text-gray-400" />
              <div>
                <p className="text-sm font-medium text-gray-400">Scoring Preset</p>
                <p className="text-white font-mono text-sm">{viewData.config.scoringPresetId}</p>
              </div>
            </div>
          </div>
        </Card>

        {/* Note about forms */}
        <Card>
          <div className="text-center py-8">
            <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-warning-amber/10 flex items-center justify-center">
              <Settings className="w-8 h-8 text-warning-amber" />
            </div>
            <h3 className="text-lg font-medium text-white mb-2">Settings Management</h3>
            <p className="text-sm text-gray-400">
              Form-based editing and ownership transfer functionality will be implemented in future updates.
            </p>
          </div>
        </Card>
      </div>
    </Section>
  );
}