import { Edit3, ExternalLink, Globe, Link2, Save, X } from 'lucide-react';

import type {
  CampusAttendancePageActions,
  CampusAttendancePageState,
} from '@/components/campus-attendance/types';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

type CampusAttendanceLinkConfigProps = {
  state: CampusAttendancePageState;
  actions: CampusAttendancePageActions;
};

export function CampusAttendanceLinkConfig({ state, actions }: CampusAttendanceLinkConfigProps) {
  const {
    campusId,
    editingLink,
    linkValue,
    myCampusConfig,
    saving,
  } = state;

  if (!campusId) {
    return (
      <div className="bg-slate-800/60 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-6">
        <h3 className="font-semibold text-white flex items-center gap-2 mb-3">
          <Link2 size={18} className="text-orange-400" />
          Campus Attendance System Link
        </h3>
        <p className="text-sm text-slate-400">Campus catalog is unavailable. Refresh campuses before configuring an attendance link.</p>
      </div>
    );
  }

  return (
    <div className="bg-slate-800/60 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-6">
      <h3 className="font-semibold text-white flex items-center gap-2 mb-4">
        <Link2 size={18} className="text-orange-400" />
        Campus Attendance System Link
      </h3>
      <p className="text-xs text-slate-400 mb-4">
        Enter the URL to your campus attendance system. This link will be accessible to all staff on your campus for quick access.
      </p>
      <div className="flex flex-col sm:flex-row gap-3">
        {editingLink === campusId ? (
          <>
            <Input
              type="url"
              value={linkValue}
              onChange={(event) => actions.setLinkValue(event.target.value)}
              placeholder="https://your-attendance-system.com/campus-link"
              className="flex-1 px-4 py-2.5 bg-slate-700/50 border border-orange-500/30 rounded-xl text-sm text-white focus:ring-2 focus:ring-orange-500/50 outline-none placeholder:text-slate-500"
            />
            <div className="flex gap-2">
              <Button
                type="button"
                onClick={() => actions.handleSaveLink(campusId)}
                disabled={saving}
                loading={saving}
                leadingIcon={<Save size={14} />}
                className="flex items-center gap-2 px-4 py-2.5 bg-emerald-500/20 text-emerald-400 border border-emerald-500/30 rounded-xl text-sm font-medium hover:bg-emerald-500/30 transition-all disabled:opacity-50"
              >
                Save
              </Button>
              <Button
                type="button"
                onClick={() => actions.setEditingLink(null)}
                leadingIcon={<X size={14} />}
                className="flex items-center gap-2 px-4 py-2.5 bg-slate-700/50 text-slate-400 border border-slate-600/50 rounded-xl text-sm font-medium hover:bg-slate-700 transition-all"
              >
                Cancel
              </Button>
            </div>
          </>
        ) : (
          <>
            <div className="flex-1 px-4 py-2.5 bg-slate-700/30 border border-slate-600/30 rounded-xl text-sm flex items-center gap-2">
              {myCampusConfig?.attendance_link ? (
                <>
                  <Globe size={14} className="text-orange-400 flex-shrink-0" />
                  <a
                    href={myCampusConfig.attendance_link}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="text-orange-400 hover:text-orange-300 truncate transition-colors"
                  >
                    {myCampusConfig.attendance_link}
                  </a>
                  <ExternalLink size={12} className="text-slate-500 flex-shrink-0" />
                </>
              ) : (
                <span className="text-slate-500 italic">No attendance link configured yet</span>
              )}
            </div>
            <Button
              type="button"
              onClick={() => {
                actions.setEditingLink(campusId);
                actions.setLinkValue(myCampusConfig?.attendance_link || '');
              }}
              leadingIcon={<Edit3 size={14} />}
              className="flex items-center gap-2 px-4 py-2.5 bg-orange-500/15 text-orange-400 border border-orange-500/30 rounded-xl text-sm font-medium hover:bg-orange-500/25 transition-all"
            >
              {myCampusConfig?.attendance_link ? 'Update Link' : 'Add Link'}
            </Button>
          </>
        )}
      </div>
      {myCampusConfig?.updated_by && (
        <p className="text-[10px] text-slate-500 mt-2">
          Last updated by {myCampusConfig.updated_by} on {new Date(myCampusConfig.updated_at).toLocaleDateString()}
        </p>
      )}
    </div>
  );
}
