'use client';

import { useState } from 'react';
import Card from '../ui/Card';
import Button from '../ui/Button';
import { Race } from '@gridpilot/racing/domain/entities/Race';

interface CompanionInstructionsProps {
  race: Race;
  leagueName?: string;
}

export default function CompanionInstructions({ race, leagueName }: CompanionInstructionsProps) {
  const [copied, setCopied] = useState(false);

  const formatDateTime = (date: Date) => {
    return new Date(date).toLocaleDateString('en-US', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
      hour: '2-digit',
      minute: '2-digit',
      timeZoneName: 'short',
    });
  };

  const raceDetails = `GridPilot Race: ${leagueName || 'League'}
Track: ${race.track}
Car: ${race.car}
Date/Time: ${formatDateTime(race.scheduledAt)}
Session Type: ${race.sessionType.charAt(0).toUpperCase() + race.sessionType.slice(1)}`;

  const handleCopyDetails = async () => {
    try {
      await navigator.clipboard.writeText(raceDetails);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch (err) {
      console.error('Failed to copy:', err);
    }
  };

  return (
    <Card className="border border-primary-blue/20 bg-iron-gray">
      <div className="flex items-start gap-3 mb-4">
        <div className="w-10 h-10 rounded-lg bg-primary-blue/10 flex items-center justify-center flex-shrink-0">
          <svg className="w-5 h-5 text-primary-blue" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </div>
        <div className="flex-1">
          <h3 className="text-lg font-semibold text-white mb-1">Alpha Manual Workflow</h3>
          <p className="text-sm text-gray-400">
            Companion automation coming in production. For alpha, races are created manually.
          </p>
        </div>
      </div>

      <div className="space-y-3 mb-4">
        <div className="flex items-start gap-3">
          <span className="flex items-center justify-center w-6 h-6 rounded-full bg-primary-blue/20 text-primary-blue text-xs font-semibold flex-shrink-0">
            1
          </span>
          <p className="text-sm text-gray-300 pt-0.5">
            Schedule race in GridPilot (completed)
          </p>
        </div>

        <div className="flex items-start gap-3">
          <span className="flex items-center justify-center w-6 h-6 rounded-full bg-charcoal-outline text-gray-400 text-xs font-semibold flex-shrink-0">
            2
          </span>
          <p className="text-sm text-gray-300 pt-0.5">
            Copy race details using button below
          </p>
        </div>

        <div className="flex items-start gap-3">
          <span className="flex items-center justify-center w-6 h-6 rounded-full bg-charcoal-outline text-gray-400 text-xs font-semibold flex-shrink-0">
            3
          </span>
          <p className="text-sm text-gray-300 pt-0.5">
            Create hosted session manually in iRacing website
          </p>
        </div>

        <div className="flex items-start gap-3">
          <span className="flex items-center justify-center w-6 h-6 rounded-full bg-charcoal-outline text-gray-400 text-xs font-semibold flex-shrink-0">
            4
          </span>
          <p className="text-sm text-gray-300 pt-0.5">
            Return to GridPilot after race completes
          </p>
        </div>

        <div className="flex items-start gap-3">
          <span className="flex items-center justify-center w-6 h-6 rounded-full bg-charcoal-outline text-gray-400 text-xs font-semibold flex-shrink-0">
            5
          </span>
          <p className="text-sm text-gray-300 pt-0.5">
            Import results via CSV upload
          </p>
        </div>
      </div>

      <div className="pt-4 border-t border-charcoal-outline">
        <div className="bg-deep-graphite rounded-lg p-3 mb-3">
          <pre className="text-xs text-gray-300 whitespace-pre-wrap font-mono">
{raceDetails}
          </pre>
        </div>

        <Button
          variant="primary"
          onClick={handleCopyDetails}
          className="w-full"
        >
          <div className="flex items-center justify-center gap-2">
            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
            </svg>
            {copied ? 'Copied!' : 'Copy Race Details'}
          </div>
        </Button>
      </div>
    </Card>
  );
}