import { motion } from 'framer-motion';
import { Building2, Users, Briefcase, MessageSquare, Shield, Monitor, Headphones, ArrowRight } from 'lucide-react';
import { Input } from '@/components/ui';
import { industries } from '@/lib/pricing-data';
import type { CompanyInfo, Industry } from '@/types/quote';

export interface Step1CompanyProfileProps {
  companyInfo: CompanyInfo;
  onUpdateCompany: (data: Partial<CompanyInfo>) => void;
  onSetEndpointCount: (count: number) => void;
  onSetIndustry: (industry: Industry | '') => void;
}

export function Step1CompanyProfile({
  companyInfo,
  onUpdateCompany,
  onSetEndpointCount,
  onSetIndustry,
}: Step1CompanyProfileProps) {
  const handleEndpointChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = parseInt(e.target.value, 10);
    if (!isNaN(value) && value >= 1) {
      onSetEndpointCount(value);
    }
  };

  const handleIndustryChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    onSetIndustry(e.target.value as Industry | '');
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      className="space-y-8"
    >
      {/* Welcome / Intro Section */}
      <div className="space-y-4">
        <h3 className="text-xl sm:text-2xl font-bold text-[#333d49]"
            style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
          Welcome to Arizona Computer Guru
        </h3>
        <p className="text-sm sm:text-base text-gray-500 leading-relaxed max-w-3xl">
          We're a <strong className="text-[#333d49]">Managed Service Provider (MSP)</strong> serving
          businesses across Arizona. An MSP acts as your outsourced IT department &mdash; we proactively
          manage, monitor, and secure your technology so you can focus on running your business.
        </p>
      </div>

      {/* What You Get - 3 cards */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 sm:gap-4">
        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-[#f8f9fb] rounded-xl p-4 border border-gray-200/50"
        >
          <div className="w-9 h-9 rounded-lg bg-[#fe7400]/8 flex items-center justify-center mb-3">
            <Monitor className="w-4.5 h-4.5 text-[#fe7400]" />
          </div>
          <h4 className="font-semibold text-[#333d49] text-sm mb-1"
              style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            GPS Monitoring
          </h4>
          <p className="text-xs text-gray-400 leading-relaxed">
            Our <strong className="text-gray-500">Guru Protection Suite</strong> provides 24/7
            remote monitoring, patch management, antivirus, and help desk support for every endpoint.
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.15 }}
          className="bg-[#f8f9fb] rounded-xl p-4 border border-gray-200/50"
        >
          <div className="w-9 h-9 rounded-lg bg-[#fe7400]/8 flex items-center justify-center mb-3">
            <Headphones className="w-4.5 h-4.5 text-[#fe7400]" />
          </div>
          <h4 className="font-semibold text-[#333d49] text-sm mb-1"
              style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            Support Plans
          </h4>
          <p className="text-xs text-gray-400 leading-relaxed">
            Flexible support tiers from basic help desk to fully managed IT with dedicated
            engineers and guaranteed response times.
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0, y: 10 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.2 }}
          className="bg-[#f8f9fb] rounded-xl p-4 border border-gray-200/50"
        >
          <div className="w-9 h-9 rounded-lg bg-[#fe7400]/8 flex items-center justify-center mb-3">
            <Shield className="w-4.5 h-4.5 text-[#fe7400]" />
          </div>
          <h4 className="font-semibold text-[#333d49] text-sm mb-1"
              style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            VoIP, Web & Email
          </h4>
          <p className="text-xs text-gray-400 leading-relaxed">
            Business phone systems, web hosting, and professional email &mdash; all managed
            alongside your IT for a single point of contact.
          </p>
        </motion.div>
      </div>

      {/* How It Works */}
      <div className="flex items-center gap-2 text-xs text-gray-400">
        <ArrowRight className="w-3.5 h-3.5 text-[#fe7400]" />
        <span>
          This wizard builds a custom quote in about 2 minutes. Tell us about your business to get started.
        </span>
      </div>

      {/* Divider */}
      <div className="border-t border-gray-100" />

      {/* Form Section */}
      <div className="space-y-6">
        {/* Company Name */}
        <div className="space-y-2">
          <label className="flex items-center gap-2 text-sm font-medium text-[#333d49]"
                 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            <Building2 className="w-4 h-4 text-[#fe7400]" />
            Company Name
            <span className="text-gray-300 font-normal text-xs">(optional)</span>
          </label>
          <Input
            type="text"
            value={companyInfo.name}
            onChange={(e) => onUpdateCompany({ name: e.target.value })}
            placeholder="Enter your company name"
            className="max-w-lg"
          />
        </div>

        {/* Number of Endpoints */}
        <div className="space-y-2">
          <label className="flex items-center gap-2 text-sm font-medium text-[#333d49]"
                 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            <Users className="w-4 h-4 text-[#fe7400]" />
            Number of Endpoints / Employees
            <span className="text-red-500 text-xs">*</span>
          </label>
          <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-4">
            <Input
              type="number"
              min={1}
              value={companyInfo.endpointCount}
              onChange={handleEndpointChange}
              className="w-full sm:w-32"
            />
            <span className="text-xs sm:text-sm text-gray-400">
              devices requiring monitoring and support
            </span>
          </div>
          <p className="text-xs text-gray-400">
            Include workstations, laptops, and servers that need IT support
          </p>
        </div>

        {/* Industry Selection */}
        <div className="space-y-2">
          <label className="flex items-center gap-2 text-sm font-medium text-[#333d49]"
                 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            <Briefcase className="w-4 h-4 text-[#fe7400]" />
            Industry
          </label>
          <select
            value={companyInfo.industry}
            onChange={handleIndustryChange}
            className="w-full max-w-lg px-4 py-3 rounded-xl border border-gray-200 bg-white text-[#333d49] hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#fe7400]/15 focus:border-[#fe7400] transition-all duration-200 appearance-none"
            style={{
              backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239aa1ac' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`,
              backgroundPosition: 'right 12px center',
              backgroundRepeat: 'no-repeat',
              backgroundSize: '20px 20px',
              paddingRight: '40px'
            }}
          >
            <option value="">Select your industry...</option>
            {industries.map((industry) => (
              <option key={industry} value={industry}>
                {industry}
              </option>
            ))}
          </select>
          <p className="text-xs text-gray-400">
            This helps us understand compliance requirements and best practices for your sector
          </p>
        </div>

        {/* Notes */}
        <div className="space-y-2">
          <label className="flex items-center gap-2 text-sm font-medium text-[#333d49]"
                 style={{ fontFamily: "'Plus Jakarta Sans', sans-serif" }}>
            <MessageSquare className="w-4 h-4 text-[#fe7400]" />
            What brings you here today?
            <span className="text-gray-300 font-normal text-xs">(optional)</span>
          </label>
          <textarea
            value={companyInfo.notes}
            onChange={(e) => onUpdateCompany({ notes: e.target.value })}
            placeholder="Tell us about your current IT challenges or what you're looking for..."
            rows={3}
            className="w-full px-4 py-3 rounded-xl border border-gray-200 bg-white text-[#333d49] placeholder-gray-400 hover:border-gray-300 focus:outline-none focus:ring-2 focus:ring-[#fe7400]/15 focus:border-[#fe7400] transition-all duration-200 resize-none"
          />
        </div>
      </div>
    </motion.div>
  );
}
